Créer un champ de recherche personnalisé

Question

J'essaie de créer un champ de recherche personnalisé. J'ai essayé ce qui suit, mais obtenir des résultats bizarres.

c'est mon code css

.inputboxSearch { 
margin: 0 0 1em 0; 
border: 1px solid #333333; 
background:url('images/searchbox.png') no-repeat; 
padding-right:20px; 
} 

où, searchbox.png est une image complète (180 * 30 .png) d'un searchbox. Ensuite, j'ai le code suivant.

<input class="inputboxSearch" type='text' name='search' size='25'/> 

Mais, comment il apparaît est que l'image de la boîte de recherche vient à l'intérieur de la boîte d'entrée, et il est seulement la moitié affichée. Le repos n'est pas visible. Mais wat je m'attendais à être, la boîte de recherche devrait englober la boîte de saisie. Le revers se passe ici de toute façon. Comment résoudre ce

Answer 1

frontière Set .inputboxSearch sans pareil, et d'augmenter sa hauteur 30px:

.inputboxSearch { 
    background: url("images/searchbox.png") no-repeat scroll 0 0 transparent; 
    border: none; 
    height: 30px; 
    margin: 0 0 1em; 
    padding-right: 20px; 
}