方塊大小功能不正常

我想創建自己的自定義select標記，但遇到了一個奇怪的問題。方塊大小功能不正常

下面是我的代碼：

HTML：

<div class="drop_select"> 
    <select> 
     <option>1</option> 
     <option>2</option> 
     <option>3</option> 
    </select> 
</div>

CSS：

.drop_select { 
    width:180px; 
    height: 34px; 
    overflow: hidden; 
    background: url(http://s22.postimg.org/liq7aghz5/select_icons.png) no-repeat 148px -165px #000000; 
    border-radius: 10px; 
    margin-bottom: 5px; 
    transition: background 0.3s ease-in-out; 
    -moz-transition: background 0.3s ease-in-out; 
    -webkit-transition: background 0.3s ease-in-out; 
    -ms-transition: background 0.3s ease-in-out; 
} 
.drop_select:hover { 
    background-position: 148px -115px; 
} 
.drop_select select { 
    background: rgba(0, 0, 0, 0); 
    -moz-background: transparent; 
    -webkit-background: transparent; 
    width: 202px; 
    padding: 8px 5px 8px 8px; 
    font: 12px arial; 
    line-height: 1; 
    border: 0; 
    border-radius: 0; 
    height: 34px; 
    -webkit-appearance: none; 
    -o-appearance: none; 
    color: #ffffff; 
    -o-background: #000000; 
} 
.drop_select:hover select { 
    color: #ebb52d; 
} 
.drop_select select option { 
    color: #fff; 
    text-indent: 5px; 
    padding: 7px 0px 7px 3px; 
    width: 182px !important; 
    background: #000; 
    border-bottom: dotted 1px #515151; 
    transition: background 0.5s ease-in-out; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -o-box-sizing: border-box; 
} 
.drop_select select option:hover, .drop_select select option:focus, .drop_select select option:active { 
    background: #515151 !important; 
    color: #dfb52d; 
}

Strange behavior

我在Firefox中使用框大小和邊框底部的工作良好，但不是在Chrome和IE中。以上是截圖

希望你能在上面的圖片中找到差異。我也在JSFiddle中弄弄了我的代碼，請給我們提供建議。

在此先感謝。

來源

2013-06-26 Praveen

@SebastianG號填充不是我的問題，它關於框的大小和邊界線。你可以在圖片中找到行爲差異。 – Praveen

但是，你應該描述你的意思是「工作良好」。 Firefox的截圖也不適合我。 –

@SebastianG在firefox中，我可以有一個帶有虛線邊框的框大小的空間。而在Chrome和IE10中缺少這一點。 – Praveen

簡短的回答是，您目前無法在Webkit瀏覽器中下載類似下拉選項。您可以使用正確樣式的UL來達到相同的結果。

來源

2013-07-16 21:16:46

方塊大小功能不正常

回答

相關問題