Есть
проект, в котором присутствует поиск с иконкой (лупой),
если его просматривать на андроиде все ок, лупа занимает заданное ей положение.
Небольшой код, как все это прописано:
<div class="header__top-search">
<div class="search">
<form action="" class="search__form">
<input type="text" name="search" class="search__input" value="Более 250 наборов" required="" onblur="if(this.value=='') this.value='Более 250 наборов';" onfocus="if(this.value=='Более 250 наборов') this.value='';">
<input type="submit" value="" class="search__submit">
</form>
</div>
</div>
.header__top-search {
float: left;
width: 21%;
}
.search {
position: relative;
}
.search__input {
padding: 7px 30px 7px 12px;
background: rgba(255, 255, 255, 0.25);
border: 0 none;
color: white;
font-family: "PT Sans", sans-serif;
font-size: 13px;
font-weight: 400;
outline: none;
width: 100%;
border-radius: 14px;
background-clip: padding-box;
-webkit-appearance: none;
}
ну и иконка:
.search__submit {
background: url("../img/search.png") 0 0 no-repeat;
width: 13px;
height: 13px;
display: block;
border: none;
position: absolute;
right: 13px;
top: 50%;
margin-top: -6.5px;
}
все просто и стандартно.
Но вот если открыть на iphone, то лупа съезжает в сторону.
Как вот такой глюк можно побороть?
UPD И да, если задать иконке right: 0; то на iphone она становиться так как нужно, но не прижимется к краю как должна. На android при right: 0; иконка справа с краю. Вот такая загадка.
