@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.
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?
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.
Utwórz pojemnik otaczający dane wejściowe i ikonę.
Ustaw pozycję kontenera jako względną
Ustaw ikonę jako absolutną pozycję. Spowoduje to ustawienie ikony względem otaczającego pojemnika.
Użyj góry, lewej, dolnej, prawej, aby ustawić ikonę w pojemniku.
Ustaw dopełnienie wewnątrz wejścia, aby tekst nie nachodził na ikonę.
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ł.
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:20px20px;background-position: right center;}
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.
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).
Odpowiedzi:
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żywapadding-left
.Innymi słowy, mają te dwie reguły CSS:
źródło
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.
Nie jako „czysty”, ale powinien działać na starszych przeglądarkach.
źródło
Rozwiązanie bez obrazów tła:
źródło
Możesz spróbować:
źródło
Uważam to za najlepsze i najczystsze rozwiązanie. Korzystanie z wcięcia tekstu w
input
elemencieCSS:
HTML:
źródło
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.
źródło
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.dodaj powyższe tagi do pliku CSS i użyj określonej klasy.
źródło
To działa dla mnie:
źródło
Możesz spróbować: Bootstrap-4 Beta
https://www.codeply.com/go/W25zyByhec
źródło
Wystarczy użyć właściwości tła w swoim CSS.
źródło
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łembackground
nieruchomość, aby była powyżejbackground-image
nieruchomości i zadziałało.Rozwiązaniem dla mojej sprawy było:
Wystarczy wspomnieć,
border
,padding
itext-align
właściwości nie są ważne dla rozwiązania. Właśnie zreplikowałem swój oryginalny kod.źródło
background
jest 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
background
brzmi : to skrótowa nazwa własności. Lepszym rozwiązaniem byłoby nieużywanie stenografii, ale użyciebackground-color
właściwości color (zakładając, że potrzebujesz zarówno koloru, jak i obrazu).Używanie z ikoną czcionki
LUB
źródło
Na przykład możesz użyć tego: etykieta z ukrytym wejściem (ikona jest obecna).
źródło
użyj tej klasy css jako danych wejściowych na początku, a następnie odpowiednio dostosuj:
źródło
Działa to dla mniej lub bardziej standardowych formularzy:
źródło