我在Internet Explorer中自定義選擇有問題。當我點擊選擇,那麼選項區域的外觀非常糟糕。在鉻或火狐它運作良好。在IE中自定義選擇
這是我的例子http://jsfiddle.net/kxytwo0e/1/。如果你用IE打開它並選擇最後一個選項,那麼你再次點擊選擇,你就會看到問題。
這裏是我的html代碼:
<div class="custom-select">
<select>
<option>Here is the first option</option>
<option>The second option</option>
<option>The 3 option</option>
<option>The 4 option</option>
</select>
</div>
這裏是我的CSS代碼:
/*custom-select start*/
.custom-select {
padding: 0;
position: relative;
height: 36px;
width: 100%;
z-index: 1;
/*margin-left: 2px;*/
}
.custom-select:hover { border-color: #999; }
.custom-select:before {
background: url("../img/arrow-down.jpg") no-repeat right center;
// color: #333;
content: "";
height: 100%;
padding: 0 0 0 20px;
position: absolute;
top: 0;
right: 20px;
z-index: -1;
}
@-moz-document url-prefix() {
.custom-select:before {
height: 34px;
right: 0px;
}
}
.custom-select select {
background-color: transparent;
border: 1px solid #b9b9b9;
/*color: #555;*/
height: 100%;
width: 100%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.custom-select select::-ms-expand { display: none;}
.custom-select select:focus { outline: none; }
.custom-select select option{
padding: 2px;
}
:-moz-any(.custom-select):before {
background-color: #fff;
pointer-events: none;
z-index: 1;
margin-top: 1px;
margin-right: 1px;
border-radius: 3px;
}
/*custom-select end*/
謝謝。
編輯:我意識到downvote是有效的,因爲我沒有指定我期望的和我得到的。在Chrome和FireFox中,選項區域顯示在select下方,但在IE中,選項區域顯示在select上方。我想在選擇項下方顯示選項。這有可能實現嗎?
你試過分配一個邊距爲第一選擇? .custom-select> select>選項:首先是選擇器。您可以將它應用於IE或者CSS或JavaScript。 – 2014-11-06 12:57:10