Letakkan ikon di dalam elemen input dalam formulir

Bagaimana cara menempatkan ikon di dalam elemen input formulir?

Versi langsung di: Tidal Force theme

Situs yang Anda tautkan menggunakan kombinasi trik CSS untuk melakukan ini. Pertama, ia menggunakan gambar latar belakang untuk <input>elemen. Kemudian, untuk mendorong kursor ke atas, ia menggunakan padding-left.

Dengan kata lain, mereka memiliki dua aturan CSS ini:

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

Solusi CSS yang diposting oleh orang lain adalah cara terbaik untuk mencapai ini.

Jika itu memberi Anda masalah (baca IE6), Anda juga dapat menggunakan input tanpa batas di dalam div.

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

Bukan sebagai "bersih", tetapi harus berfungsi pada peramban yang lebih lama.

Solusi tanpa gambar latar belakang:

#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>

Anda dapat mencoba ini:

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

Saya menemukan ini solusi terbaik dan terbersih untuk itu. Menggunakan indentasi teks pada inputelemen

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" />

Cara sederhana dan mudah untuk menempatkan Ikon di dalam input adalah dengan menggunakan properti posisi CSS seperti yang ditunjukkan dalam kode di bawah ini. Catatan: Saya telah menyederhanakan kode untuk tujuan kejelasan.

1. Buat wadah di sekitar input dan ikon.
2. Tetapkan posisi wadah sebagai relatif
3. Tetapkan ikon sebagai posisi absolut. Ini akan menempatkan ikon relatif terhadap wadah di sekitarnya.
4. Gunakan bagian atas, kiri, bawah, kanan untuk memposisikan ikon dalam wadah.
5. Atur padding di dalam input agar teks tidak tumpang tindih ikon.

#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;
}

tambahkan tag di atas ke dalam file CSS Anda dan gunakan kelas yang ditentukan.

Ini bekerja untuk saya:

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>

Anda Bisa Coba ini: Bootstrap-4 Beta
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>

Cukup gunakan properti latar belakang di CSS Anda.

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

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

Saya punya situasi seperti ini. Itu tidak berhasil karena background: #ebebeb;. Saya ingin meletakkan latar belakang pada bidang input dan properti itu terus-menerus muncul di bagian atas gambar latar belakang, dan saya tidak bisa melihat gambar! Jadi, saya memindahkan backgroundproperti itu ke atas background-imageproperti itu dan berhasil.

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;
}

Solusi untuk kasus saya adalah:

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;
}

Hanya untuk menyebutkan, border, paddingdan text-alignsifat-sifat yang tidak penting untuk solusi. Saya baru saja mereplikasi kode asli saya.

Menggunakan dengan font-ikon

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

ATAU

<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>

Misalnya, Anda dapat menggunakan ini: label dengan input tersembunyi (ikon ada).

gunakan kelas css ini untuk input Anda di awal, lalu sesuaikan sesuai:

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

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

Ini berfungsi untuk saya untuk kurang lebih bentuk standar:

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