Supprimer l'espace dans la zone de sélection

Question

J'ai quelques champs de saisie dans un formulaire. Je leur ai donné un rembourrage de 5px mais les boîtes de sélection ont apparemment un espace supplémentaire à l'intérieur. Ce n'est pas causé par le remplissage, la marge ou le retrait de texte. L'alignement du texte est à gauche. Y a-t-il un moyen de s'en débarrasser?

suit Voici mon code. Au fond est un lien vers le violon.

CSS

input[type=text], 
select { 
    padding:5px; 
} 
select { 
    border:solid 1px #555; 
    padding:5px; 
} 

HTML

<div> 
    <select> 
     <option>Test1</option> 
     <option>Test2</option> 
     <option>Test3</option> 
     <option>Test4</option> 
    </select> 
</div> 
<div> 
    <input type="text" value="Test" /> 
</div> 

https://jsfiddle.net/64ppa5f5/

PS:

J'ai aussi shecked le zoom et il est 100%.

Answer 1

Il a quelque chose à faire avec le rendu du navigateur lui-même. Voir cette réponse sur la même question pour plus d'informations: Text Padding in Select Boxes

En résumé, vous ne devriez pas le faire ou pas commun.

Answer 2

Le remplissage que vous voyez provient de la feuille de style spécifique au navigateur. Pour supprimer de l'espace dans la zone de sélection, ajoutez le style suivant.

input[type=text], 
select { 
    padding:5px; 
} 

select { 
    -webkit-appearance: none; 
    -moz-appearance : none; 
    border:solid 1px #555; 
    border-radius:3px; 
    padding:5px; 
} 

Conseiller cet link