kurtko kurtko - 14 days ago 5
CSS Question

How to absolute positioning an icon inside input with text align and 50% width

I need a input horizontally centered and a icon inside. Something like this:

enter image description here

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?

Answer

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>