刪除選擇框中的空格

我在表單中有幾個輸入字段。我給他們所有的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％。

來源

2016-08-17 Benjamin

請提供代碼，其中你的問題是可再現的。 – andreas

您是否嘗試添加負值margin-left：-5px; ？ – fernando

設置負邊距只會將整個選擇框移到左側。 – Benjamin

它有一些與瀏覽器呈現自己的東西待辦事項。在同樣的問題上看到這個答案更多的信息：Text Padding in Select Boxes

總之，你不應該這樣做或不共同。

來源

2016-08-17 11:30:27 Quackerjack

謝謝，那篇文章正好描述了我看到的效果。太糟糕了，就是這樣壽：（ – Benjamin

是的，你可以嘗試@Jeni解決方案，但它不會保存，它會產生預期的結果無處不在 – Quackerjack

您看到的填充來自瀏覽器特定的樣式表。要刪除選擇框中的空間，請添加以下樣式。

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

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

請參閱本link

來源

2016-08-17 11:31:36 Jeni

嗨，我試過外觀屬性，但不幸它確實刪除了一切，但這惱人的位空間:)閱讀其中一個建議的鏈接顯然它不能被刪除，我必須使用解決方法.. – Benjamin

刪除選擇框中的空格

回答

相關問題