如何添加箭頭選擇？

我正在嘗試restyle選擇框。想要添加一個CSS箭頭（在縮放頁面時看起來不錯），它會在選擇框展開時旋轉，但我無法根據選擇框正確對齊箭頭。試圖從互聯網上使用一些代碼，但它不適合我。當選擇框展開時，也不能使箭頭向下旋轉。如何添加箭頭選擇？

問：

如何正確對齊箭頭？
如何在用戶點擊選擇框時將其向下旋轉？

這裏是一個小提琴：http://jsfiddle.net/QYtaS/ 正如你所看到的，箭頭絕對飛出選擇框。

HTML：

<div class="arrow"> 
    <select> 
     <option></option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
    </select> 
</div>

CSS：

select { 
    width: 100px; 
    margin: 0; 
    background-color: #FFFEFD; 
    border: solid 1px #F15922; 
    color: #000; 
    outline:none; 
    display: inline-block; 
    -webkit-appearance:none; 
    -moz-appearance:none; 
    appearance:none; 
    cursor:pointer; 
} 
.arrow { 
    position:relative 
} 
.arrow:after { 
    content:''; 
    font: 1em"Consolas", monospace; 
    width: 0; 
    height: 0; 
    position: absolute; 
    right:8px; 
    top:50%; 
    padding: 0 0 -25% 0; 
    margin-right: 3px; 
    border-width: 8px 0 8px 8px; 
    border-style: solid; 
    border-color: transparent #F15922; 
    pointer-events:none; 
} 

.arrow:before { 
    content:''; 
    right:6px; 
    top:0px; 
    width:20px; 
    height:20px; 
    position:absolute; 
    pointer-events:none; 
    display:block; 
}

來源

2013-08-06 Very Curious

不要嘗試打開標準選擇框。真。壓抑。用jquery構建一個你自己的div。 –

您需要支持哪些瀏覽器？如果IE8處於混合狀態，這很困難。我個人使用的是背景圖片而不是：在 – user1337

之後，我想至少支持Chrome，Mozilla和IE（最新的版本）。我用背景圖片做了這個版本，但我仍然需要將它關閉並重新着色爲綠色。至少對這個解決方案有什麼想法？ –

這裏是你的答案在的jsfiddle：http://jsfiddle.net/ry7ykesy/3/

我已在你所提供的HTML結構一個改變。

/* This is JAVASCRIPT code */ 
 

 
/* This click event to add class "open" to "custom-selectbox" */ 
 
$('.custom-selectbox #day').on('click', function(e) { 
 
    $(this).parent().toggleClass("open"); 
 
    return false; 
 
}); 
 
/* This click event on document to detect outside click */ 
 
$(document).on('click', function(e) { 
 
\t var $selectBoxContainer = $('.custom-selectbox'); 
 
\t if($selectBoxContainer.hasClass('open')){ 
 
\t \t $selectBoxContainer.removeClass('open'); 
 
\t } 
 
\t else{ 
 
\t \t return false; 
 
\t } 
 
});

/* This is CSS code */ 
 

 
select { 
 
\t width: 150px; 
 
\t background-color: #FFFEFD; 
 
\t border: solid 1px #F15922; 
 
\t color: #000; 
 
\t outline: none; 
 
\t display: inline-block; 
 
\t -webkit-appearance: none; 
 
\t -moz-appearance: none; 
 
\t appearance: none; 
 
\t cursor: pointer; 
 
\t height: 20px; 
 
\t padding-right: 20px; 
 
} 
 
.custom-selectbox{ 
 
\t position: relative; 
 
\t display: inline-block; 
 
} 
 
.custom-selectbox:after{ 
 
\t content: " "; 
 
\t height: 0; 
 
\t width: 0; 
 
\t border-left: 5px solid transparent; 
 
\t border-right: 5px solid transparent; 
 
\t border-top: 5px solid #F15922; 
 
\t position: absolute; 
 
\t right: 6px; 
 
\t top: 8px; 
 
\t transition: all 0.3s linear; 
 
} 
 
.custom-selectbox.open:after{ 
 
\t -webkit-transform: rotate(-180deg); 
 
\t -moz-transform: rotate(-180deg); 
 
\t -o-transform: rotate(-180deg); 
 
\t transform: rotate(-180deg); 
 
}

<!-- This is HTML Code --> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="custom-selectbox"> 
 
\t <select name="day" id="day" required="required"> 
 
\t \t <option>-select-</option> 
 
\t \t <option value="1">1</option> 
 
\t \t <option value="2">2</option> 
 
\t </select> 
 
</div>

來源

2014-09-19 04:02:04

如何添加箭頭選擇？

回答

相關問題