• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Ustawienie ikony wewnątrz search inputa

Object Storage Arubacloud
0 głosów
595 wizyt
pytanie zadane 12 września 2019 w HTML i CSS przez MAXIM7 Obywatel (1,990 p.)

Chciałbym ustawić icon-search wewnątrz search inputa po jego prawej stronie. Nie wiem jak to zrobić, ponieważ użyłem już absolute i relative position. Search input jest ustawiony dzięki niemu po środku divów .SB. Na zdjęciu jest pokazane ułożenie divów. W czerwonym punkcie chciałbym ustawić ikonę.

<nav id="M">
<a href="#">
<div class="SB">
<img src="x1.png">
</div>
</a>

<a href="#">
<div class="SB">
<img src="x2.png">
</div>
</a>

<i class="icon-search"></i> 
<input type="search" id="MS" placeholder="Search">
</nav>
#M
{
width: 100%;
margin-top: 58px;
display: flex;
position: relative;
justify-content: center;
}

#M a
{
width: 50%;
}

.SB
{
opacity: 1;
}

.SB:hover
{
opacity: 0.95;
}

.SB img
{
width: 100%;
display: block;
}

#MS
{
bottom: 35px;
width: 685px;   
height: 50px;
border: 0;
position: absolute;
outline: none;
}

#M-searchbox::-webkit-search-cancel-button
{
-webkit-appearance:none;
}

1 odpowiedź

+1 głos
odpowiedź 12 września 2019 przez DevLukiLL Obywatel (1,050 p.)
wybrane 12 września 2019 przez MAXIM7
 
Najlepsza
Możesz inputa zamknąć w dodatkowym divie, przypisać do tego diva wtedy atrybut position o wartosci absolute, i wtedy do inputa możesz dać relative i wypozycjonować ikonkę do niego absolutnie. Jest to jakieś rozwiązanie ale na siłę troszkę.
komentarz 12 września 2019 przez MAXIM7 Obywatel (1,990 p.)
Super, działa, dzięki wielkie. A masz może jakiś pomysł na rozwiązanie nie "na siłę"? :D
komentarz 13 września 2019 przez DevLukiLL Obywatel (1,050 p.)

Znaczy jak byś miał jakiś obrazek możesz zrobić też tak:

 input[type='search'] {
        background-position: 100% 0px;
        background-repeat: no-repeat;
        background-image: url(user.jpg);
}

Powinno też przesunąć na koniec inputa, ale jeżeli chodzi o font icons to pozycjonowanie absolutne mi tylko przychodzi do głowy :D 

komentarz 13 września 2019 przez MAXIM7 Obywatel (1,990 p.)
Oki, w tym przypadku najważniejsze, że działa. :) dzięki

Podobne pytania

+1 głos
3 odpowiedzi 770 wizyt
pytanie zadane 20 stycznia 2021 w HTML i CSS przez Mlorism Użytkownik (580 p.)
0 głosów
3 odpowiedzi 706 wizyt
pytanie zadane 6 czerwca 2019 w HTML i CSS przez Moras Obywatel (1,620 p.)
+1 głos
1 odpowiedź 210 wizyt
pytanie zadane 9 marca 2018 w C i C++ przez Hiskiel Pasjonat (22,830 p.)

92,759 zapytań

141,682 odpowiedzi

320,450 komentarzy

62,103 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...