Ustawienie ikony wewnątrz search inputa

Question

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

Answer 1

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

Comments

Super, działa, dzięki wielkie. A masz może jakiś pomysł na rozwiązanie nie "na siłę"? :D

---

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 

---

Oki, w tym przypadku najważniejsze, że działa. :) dzięki