css input search

comic button input search

by femfoyou

HTML

<div id="main">
      <form>
        <input type="search" id="search">
      </form>
      
     <button id="submite" class="solid">Search</button>
    </div><!--main-->
    
<ul class="list-group">
<li class="list-group-item"><img src="https://poketoolset.com/assets/img/pokemon/images/148.png" alt="pokeMon" class="pokemon" height="20"> clefairy</li>
<li class="list-group-item">clefable</li>
<li class="list-group-item"><button class="poke">cleffa</button></li>
</ul>

CSS

#main { 
  width: 400px; 
  height: 50px; 
  background: #f2f2f2; 
  padding: 6px 10px; 
  border: 1px solid #b5b5b5;
  margin: 0 auto;
   
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px; 
  border-radius: 5px; 
  -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede; 
  -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede; 
  box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede; 
}

input[type="search"] { 
  float: left; 
  width: 230px; 
  padding: 15px 5px 5px 5px; 
  margin-top: 5px; 
  margin-left: 3px; 
  border: 1px solid #999999; 
    
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px; 
  border-radius: 5px; 
  
  -moz-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede; 
  -webkit-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede; 
  box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede; 
}

input[type="submit"].solid, #submite.solid { 
  float: left; 
  cursor: pointer; 
  width: 130px; 
  padding: 8px 6px; 
  margin-left: 20px; 
  background-color: #f8b838; 
  color: rgba(134, 79, 11, 0.8); 
  text-transform: uppercase; 
  font-weight: bold; 
  border: 1px solid #99631d; 
    
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px; 
  border-radius: 5px; 
    
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7), 0 -1px 0 rgba(64, 38, 5, 0.9);  
    
  -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc; 
  -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc; 
  box-shadow: inset 0 0 3px rgba(255, 255,...