ใส่ไอคอนภายในองค์ประกอบอินพุตในแบบฟอร์ม

ฉันจะวางไอคอนไว้ในองค์ประกอบอินพุตของฟอร์มได้อย่างไร

รุ่นสดที่: ธีม Tidal Force

ไซต์ที่คุณเชื่อมโยงใช้การผสมผสานของ CSS เพื่อดึงสิ่งนี้ออก ก่อนอื่นจะใช้ภาพพื้นหลังสำหรับ<input>องค์ประกอบ padding-leftจากนั้นในการสั่งซื้อที่จะผลักดันเคอร์เซอร์ไปที่จะใช้

กล่าวอีกนัยหนึ่งพวกเขามีกฎ CSS สองข้อนี้:

background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;

โซลูชัน CSS ที่โพสต์โดยผู้อื่นเป็นวิธีที่ดีที่สุดในการทำสิ่งนี้ให้สำเร็จ

หากสิ่งนั้นควรทำให้คุณมีปัญหาใด ๆ (อ่าน IE6) คุณสามารถใช้อินพุตแบบไร้ขอบภายใน div

<div style="border: 1px solid #DDD;">
    <img src="icon.png"/>
    <input style="border: none;"/>
</div>

ไม่เป็น "สะอาด" แต่ควรใช้กับเบราว์เซอร์รุ่นเก่า

โซลูชันที่ไม่มีภาพพื้นหลัง:

#input_container {
    position:relative;
    padding:0 0 0 20px;
    margin:0 20px;
    background:#ddd;
    direction: rtl;
    width: 200px;
}
#input {
    height:20px;
    margin:0;
    padding-right: 30px;
    width: 100%;
}
#input_img {
    position:absolute;
    bottom:2px;
    right:5px;
    width:24px;
    height:24px;
}

<div id="input_container">
    <input type="text" id="input" value>
    <img src="https://cdn4.iconfinder.com/data/icons/36-slim-icons/87/calender.png" id="input_img">
</div>

คุณสามารถลองสิ่งนี้:

input[type='text'] {
    background-image: url(images/comment-author.gif);
    background-position: 7px 7px;
    background-repeat: no-repeat;
}

ฉันพบว่านี่เป็นทางออกที่ดีที่สุดและสะอาดที่สุด ใช้การเยื้องข้อความในinputองค์ประกอบ

CSS:

#icon{
background-image:url(../images/icons/dollar.png); 
background-repeat: no-repeat; 
background-position: 2px 3px;
}

HTML:

<input id="icon" style="text-indent:17px;" type="text" placeholder="Username" />

วิธีที่ง่ายและสะดวกในการจัดตำแหน่งไอคอนด้านในของอินพุตคือการใช้คุณสมบัติตำแหน่ง CSS ดังที่แสดงในรหัสด้านล่าง หมายเหตุ: ฉันได้ลดความซับซ้อนของรหัสเพื่อความชัดเจน

1. สร้างคอนเทนเนอร์ที่ล้อมรอบอินพุตและไอคอน
2. ตั้งค่าตำแหน่งคอนเทนเนอร์เป็นแบบสัมพันธ์
3. ตั้งไอคอนเป็นตำแหน่งที่แน่นอน สิ่งนี้จะวางตำแหน่งไอคอนที่สัมพันธ์กับคอนเทนเนอร์โดยรอบ
4. ใช้ด้านบนซ้ายซ้ายล่างขวาเพื่อวางตำแหน่งไอคอนในคอนเทนเนอร์
5. ตั้งค่าช่องว่างภายในอินพุตเพื่อให้ข้อความไม่ทับซ้อนไอคอน

#input-container {
  position: relative;
}

#input-container > img {
  position: absolute;
  top: 12px;
  left: 15px;
}

#input-container > input {
  padding-left: 40px;
}

<div id="input-container">
  <img/>
  <input/>
</div>

.icon{
background: url(1.jpg) no-repeat;
padding-left:25px;
}

เพิ่มแท็กด้านบนลงในไฟล์ CSS ของคุณและใช้คลาสที่ระบุ

สิ่งนี้ใช้ได้กับฉัน:

input.valid {
   border-color: #28a745;
   padding-right: 30px;
   background-image: url('https://www.stephenwadechryslerdodgejeep.com/wp-content/plugins/pm-motors-plugin/modules/vehicle_save/images/check.png');
   background-repeat: no-repeat;
   background-size: 20px 20px;
   background-position: right center;
}

<form>
<label for="name">Name</label>
<input class="valid" type="text" name="name" />
</form>

คุณสามารถลองสิ่งนี้: Bootstrap-4 เบต้า
https://www.codeply.com/go/W25zyByhec

<div class="container">
            <form>
                <div class="row">
                    <div class="input-group mb-3 col-sm-6">
                      <input type="text" class="form-control border-right-0" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
                        <div class="input-group-prepend bg-white">
                            <span class="input-group-text border-left-0 rounded-right bg-white" id="basic-addon1"><i class="fas fa-search"></i></span>
                        </div>
                    </div>
                </div>
            </form>
        </div>

เพียงใช้คุณสมบัติพื้นหลังใน CSS ของคุณ

<input id="foo" type="text" />

#foo
{
    background: url(/img/foo.png);
}

ฉันมีสถานการณ์เช่นนี้ background: #ebebeb;มันไม่ได้ทำงานเพราะ ฉันต้องการใส่พื้นหลังในฟิลด์อินพุตและคุณสมบัตินั้นปรากฏขึ้นอย่างต่อเนื่องที่ด้านบนของภาพพื้นหลังและฉันไม่เห็นภาพ! ดังนั้นฉันจึงย้ายbackgroundสถานที่ให้อยู่เหนือbackground-imageสถานที่ให้บริการและมันใช้งานได้

input[type='text'] {
    border: 0;
    background-image: url('../img/search.png');
    background-position: 9px 20px;
    background-repeat: no-repeat;
    text-align: center;
    padding: 14px;
    background: #ebebeb;
}

ทางออกสำหรับกรณีของฉันคือ:

input[type='text'] {
    border: 0;
    background: #ebebeb;
    background-image: url('../img/search.png');
    background-position: 9px 20px;
    background-repeat: no-repeat;
    text-align: center;
    padding: 14px;
}

เพียงแค่พูดถึงborder, paddingและtext-alignคุณสมบัติไม่สำคัญสำหรับการแก้ปัญหา ฉันเพิ่งจำลองรหัสเดิมของฉัน

ใช้กับ font-icon

<input name="foo" type="text" placeholder="&#61447;">

หรือ

<input id="foo" type="text" />

#foo::before
{
  font-family: 'FontAwesome';
  color:red;
  position: relative;
  left: -5px;
  content: "\f007";    
}

 <label for="fileEdit">
    <i class="fa fa-cloud-upload">
    </i>
    <input id="fileEdit" class="hidden" type="file" name="addImg" ng-file-change="onImageChange( $files )" ng-multiple="false" accept="{{ contentType }}"/>
  </label>

ตัวอย่างเช่นคุณสามารถใช้สิ่งนี้: ป้ายกำกับพร้อมอินพุตที่ซ่อนอยู่ (ไอคอนมีอยู่)

ใช้คลาส css นี้สำหรับอินพุตของคุณเมื่อเริ่มต้นจากนั้นปรับแต่งตามความเหมาะสม:

    
 .inp-icon{
background: url(https://i.imgur.com/kSROoEB.png)no-repeat 100%;
background-size: 16px;
 }

<input class="inp-icon" type="text">

สิ่งนี้ใช้ได้กับฉันสำหรับรูปแบบมาตรฐานที่มากหรือน้อย:

  <button type="submit" value="Submit" name="ButtonType" id="whateveristheId" class="button-class">Submit<img src="/img/selectedImage.png" alt=""></button>