選択ボックス内のスペースを削除します

Question

フォームに入力フィールドがいくつかあります。私はそれらにすべて5pxのパディングを与えましたが、選択ボックスには一見余裕がありました。これは、パディング、余白またはテキストインデントによって引き起こされるものではありません。テキストの配置はそのままです。これを取り除く方法はありますか？

は、ここに私のコードの後に​​続きます。一番下にはフィドルへのリンクがあります。

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：

私はまた、ズームをshecked、それは100％です。

Answer 1

ブラウザのレンダリング自体に何か不具合があります。詳細については、同じ質問でこの回答をご覧ください。Text Padding in Select Boxes

要するに、これを行うべきではない、あるいは共通ではありません。

Answer 2

あなたが見ているパディングは、ブラウザ固有のスタイルシートから来ています。選択ボックス内のスペースを削除するには、次のスタイルを追加します。

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

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

あなたの問題は再現可能です。このlink