• 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

Aruba Cloud - Virtual Private Server VPS
0 głosów
681 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 1,072 wizyt
pytanie zadane 20 stycznia 2021 w HTML i CSS przez Mlorism Użytkownik (580 p.)
0 głosów
3 odpowiedzi 834 wizyt
pytanie zadane 6 czerwca 2019 w HTML i CSS przez Moras Obywatel (1,620 p.)
+1 głos
1 odpowiedź 260 wizyt
pytanie zadane 9 marca 2018 w C i C++ przez Hiskiel Pasjonat (22,830 p.)

93,337 zapytań

142,332 odpowiedzi

322,423 komentarzy

62,677 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

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...