Umieść ikonę w elemencie wejściowym w formularzu

272

Jak umieścić ikonę w elemencie wejściowym formularza?

Zrzut ekranu formularza internetowego z trzema danymi wejściowymi z ikonami

Wersja na żywo pod: motyw Tidal Force

akif
źródło
2
@IvanSokalskiy Zakładając, że ktoś używa Bootstrap. Nie wszyscy, którzy się z tym spotkają, będą używać Bootstrap!
Barry Michael Doyle

Odpowiedzi:

392

Witryna, do której prowadzi link, wykorzystuje kombinację sztuczek CSS, aby to zrobić. Po pierwsze, używa elementu obrazu tła dla <input>elementu. Następnie, aby przesunąć kursor, używa padding-left.

Innymi słowy, mają te dwie reguły CSS:

background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;
Dan Lew
źródło
2
Czy mógłbyś opisać więcej na temat górnych i lewych parametrów (7px 7 px) i innych atrybutów? To musi być pomocne.
QMaster
262
Rada: przestań używać i obsługiwać IE 8.
programista
3
jak mogę wyrównać obraz do prawego końca pola wprowadzania?
ishanbakshi
3
Problem z obrazami tła polega na tym, że autouzupełnianie Chrome usuwa obraz tła i sprawia, że ​​tło jest całkowicie żółte
Cătălin Rădoi
1
Aby wyrównać do prawej, użyj: background-position: right;
raison
52

Rozwiązania CSS opublikowane przez innych są najlepszym sposobem na osiągnięcie tego.

Jeśli to powinno sprawić ci jakiekolwiek problemy (czytaj IE6), możesz także użyć wejścia bez obramowania wewnątrz div.

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

Nie jako „czysty”, ale powinien działać na starszych przeglądarkach.

harpo
źródło
2
dobry dodatek do tej odpowiedzi. czasami np. powoduje problemy i jest to dobry sposób na rozwiązanie jednego z nich. pracował dla mnie, choć zamiast tego z rozpiętością.
Ross,
Miły sposób na dodanie bardziej złożonych struktur w danych wejściowych!
jonhue
@jonhue, nie poleciłbym tego, chyba że nadal żyjesz w poprzedniej dekadzie i nie potrzebujesz obsługi IE6. Nawet wtedy nie nazwałbym tego „czystym”.
harpo
@harpo Jak w takim razie umieściłbyś linki w danych wejściowych?
jonhue
35

Rozwiązanie bez obrazów tła:

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

majid savalanpour
źródło
34

Możesz spróbować:

input[type='text'] {
    background-image: url(images/comment-author.gif);
    background-position: 7px 7px;
    background-repeat: no-repeat;
}
Alan Haggai Alavi
źródło
26

Uważam to za najlepsze i najczystsze rozwiązanie. Korzystanie z wcięcia tekstu w inputelemencie

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" />
Rdza
źródło
3
Wspieram wcięcie tekstu, ponieważ lewy dopełnienie zwiększy szerokość pola i wypłynie z elementu nadrzędnego.
Kostiantyn
1
dlaczego wstawiłeś ten styl zamiast w #icon css?
Wylliam Judd
@WylliamJudd To tylko w celach demonstracyjnych :)
Rust
dlaczego użyłeś id zamiast klasy?
majid savalanpour
9

Prostym i łatwym sposobem na umieszczenie ikony wewnątrz wejścia jest użycie właściwości position CSS, jak pokazano w poniższym kodzie. Uwaga: Uproszczono kod w celu zachowania przejrzystości.

  1. Utwórz pojemnik otaczający dane wejściowe i ikonę.
  2. Ustaw pozycję kontenera jako względną
  3. Ustaw ikonę jako absolutną pozycję. Spowoduje to ustawienie ikony względem otaczającego pojemnika.
  4. Użyj góry, lewej, dolnej, prawej, aby ustawić ikonę w pojemniku.
  5. Ustaw dopełnienie wewnątrz wejścia, aby tekst nie nachodził na 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>

Ryan Forte
źródło
1
Czysty i prosty, tak. Powinieneś również usunąć ramkę wejściową za pomocą input { border: none; }i dodać ramkę, aby #input-container { border: 1px solid #000; }wyglądało to tak, jakby obraz był w środku i faktycznie był częścią danych wejściowych.
Mario Werner
1
@MarioWerner wepchnął obraz do wejścia, nie trzeba robić hacków granicznych, to jest piękno. Wykorzystam ten pomysł.
Głupiec
8
.icon{
background: url(1.jpg) no-repeat;
padding-left:25px;
}

dodaj powyższe tagi do pliku CSS i użyj określonej klasy.

Rafi Haidari
źródło
6

To działa dla mnie:

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>

Gxzzin
źródło
obraz znika podczas autouzupełniania w chrome
neptune
Jak sprawić, by obraz był klikalny, np. Jeśli używasz ikony „zapisz”?
user460114
To działało dla mnie w mojej aplikacji hybrydowej, po prostu sprawiłem, że całe pole wprowadzania było klikalne po wstawieniu obrazu.
shivam srivastava
5

Możesz spróbować: 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>





Hasan
źródło
4

Wystarczy użyć właściwości tła w swoim CSS.

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

#foo
{
    background: url(/img/foo.png);
}
Dan Walker
źródło
4

Miałem taką sytuację. To nie działało z powodu background: #ebebeb;. Chciałem umieścić tło w polu wejściowym, a ta właściwość ciągle pojawiała się na górze obrazu tła i nie mogłem go zobaczyć! Więc przeniosłem backgroundnieruchomość, aby była powyżej background-imagenieruchomości i zadziałało.

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

Rozwiązaniem dla mojej sprawy było:

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

Wystarczy wspomnieć, border, paddingi text-alignwłaściwości nie są ważne dla rozwiązania. Właśnie zreplikowałem swój oryginalny kod.

fantja
źródło
1
To jest bardzo stare i mam nadzieję, że nauczyłeś się ponad rok temu, ale backgroundjest to skrótowa nazwa właściwości, której używasz do pokrycia wszystkich właściwości tła jednocześnie: background: [color] [image url] [repeat] [position]i dlatego twój kolor nadpisał wszystko. Możesz także zostawić go na miejscu i zmienić nazwę nieruchomości nabackground-color
borbulon
@borbulon tak masz rację. prawie zawsze najlepiej jest używać skróconej nazwy własności, całkowicie się z tym zgadzaj. Ale celem tego postu jest wskazanie, że kolejność właściwości czasami ma znaczenie, a te „małe” reguły CSS mogą być bardzo frustrujące, szczególnie dla początkujących projektantów.
fantja
1
Zupełnie się zgadzam, ale sedno sprawy nadal backgroundbrzmi : to skrótowa nazwa własności. Lepszym rozwiązaniem byłoby nieużywanie stenografii, ale użycie background-colorwłaściwości color (zakładając, że potrzebujesz zarówno koloru, jak i obrazu).
borbulon
3

Używanie z ikoną czcionki

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

LUB

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

#foo::before
{
  font-family: 'FontAwesome';
  color:red;
  position: relative;
  left: -5px;
  content: "\f007";    
}
Ali Göksel Bektaş
źródło
7
Wydaje się, że :: przedtem nie można zastosować elementu wejściowego.
Vishnja,
1
 <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>

Na przykład możesz użyć tego: etykieta z ukrytym wejściem (ikona jest obecna).

yazabara
źródło
1

użyj tej klasy css jako danych wejściowych na początku, a następnie odpowiednio dostosuj:

    
 .inp-icon{
background: url(https://i.imgur.com/kSROoEB.png)no-repeat 100%;
background-size: 16px;
 }
<input class="inp-icon" type="text">

csandreas1
źródło
Czy wiesz, jak ustawić zdarzenie kliknięcia tylko dla tego obrazu?
Arjun
0

Działa to dla mniej lub bardziej standardowych formularzy:

  <button type="submit" value="Submit" name="ButtonType" id="whateveristheId" class="button-class">Submit<img src="/img/selectedImage.png" alt=""></button>
Yan D.
źródło