Issue
I need a input horizontally centered and a icon inside. Something like this:
I have this code:
.search {
position: relative;
text-align:center;
background-color:#ddd;
padding:2em 0;
}
input[type="search"] {
text-indent: 2em;
font-size:1.9em;
padding:0.2em 0;
width:50%;
}
.fa-search {
position: absolute;
left: 10px;
top:50%;
transform: translateY(-50%);
font-size: 2em;
color:orange;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="search">
<i class="fa fa-search" aria-hidden="true"></i>
<input type="search" class="search-field" placeholder="Buscar" name="s" />
</div>
I checked that if I remove left: 10px;
works fine in windows navigators but not in mac.
Any ideas?
Solution
See Snippet.
.search {
position: relative;
text-align:center;
background-color:#ddd;
padding:2em 0;
}
.search_inner{
width:60%;
position:relative;
margin:auto;
}
input[type="search"] {
text-indent: 2em;
font-size:1.9em;
padding:0.2em 0;
width:100%;
}
.fa-search {
position: absolute;
left: 10px;
top:50%;
transform: translateY(-50%);
font-size: 2em;
color:orange;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="search">
<div class="search_inner">
<i class="fa fa-search" aria-hidden="true"></i>
<input type="search" class="search-field" placeholder="Buscar" name="s" />
</div>
</div>
Answered By - Ayatullah Rahmani
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.