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

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