我想restyle选择框。要添加CSS箭头，这将作为旋转选择框将扩大（缩小页面时看起来不错），但我不能够按照选择框正确对齐的箭头。尝试使用一些code从互联网上，但它不为我工作。也无法使箭头向下旋转时，选择框扩展。

问：

如何正确对齐的箭头？

如何使它旋转倒在用户点击选择框？

下面是一个小提琴： http://jsfiddle.net/QYtaS/ 正如你所看到的，绝对箭飞出来的选择框。

HTML：

 ＆LT; D​​IV CLASS =箭＆GT;
    ＆LT;选择＆GT;
        ＆LT;选项＆GT;＆LT; /选项＆GT;
        ＆LT;期权价值=1＆GT; 1＆LT; /选项＆GT;
        ＆LT;期权价值=2＆GT; 2'; /选项＆GT;
    ＆LT; /选择＆GT;
＆LT; / DIV＆GT;
 

CSS：

 选择{
    宽度：100像素;
    保证金：0;
    背景颜色：#FFFEFD;
    边界：1px的固体＃F15922;
    颜色：＃000;
    概述：无;
    显示：inline-block的;
    -webkit-外观：无;
    -moz-外观：无;
    外观：无;
    光标：指针;
}
。箭头 {
    位置：相对
}
.arrow：后{
    内容：'';
    字体：1EM索拉，等宽;
    宽度：0;
    身高：0;
    位置：绝对的;
    右：8像素;
    顶部：50％;
    填充：0 0 -25％0;
    保证金右：的3px;
    边框宽度：8像素0 8像素8像素;
    边框风格：固体;
    边框颜色：透明＃F15922;
    指针事件：无;
}

.arrow：前{
    内容：'';
    右：6px;
    顶部：0px;
    宽度：20像素;
    高度：20像素;
    位置：绝对的;
    指针事件：无;
    显示：块;
}
 

解决方案

下面是的jsfiddle你的答案： HTTP： //jsfiddle.net/ry7ykesy/3/

我已经在你所提供的HTML结构中的一个变化。

I am trying to restyle Select box. Want to add a CSS arrow (looks nice when zooming the page), which would rotate as the Select box would expand, but I am not able to align the arrow properly according to the Select box. Tried to use some code from the internet, but it doesn't work for me. Also can't make the arrow rotate down when Select box expands.

Question:

How to align the arrow properly?

How to make it rotate down on user's click on the Select box?

Here is a fiddle: http://jsfiddle.net/QYtaS/ As you can see, the arrow absolutely flew out of the Select Box.

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;
}

Here is your answer at jsfiddle: http://jsfiddle.net/ry7ykesy/3/

I have made one change in the html structure that you have provided.

/* 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) {
	var $selectBoxContainer = $('.custom-selectbox');
	if($selectBoxContainer.hasClass('open')){
		$selectBoxContainer.removeClass('open');
	}
	else{
		return false;
	}
});

/* This is CSS code */

select {
	width: 150px;
	background-color: #FFFEFD;
	border: solid 1px #F15922;
	color: #000;
	outline: none;
	display: inline-block;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
	height: 20px;
	padding-right: 20px;
}
.custom-selectbox{
	position: relative;
	display: inline-block;
}
.custom-selectbox:after{
	content: " ";
	height: 0;
	width: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #F15922;
	position: absolute;
	right: 6px;
	top: 8px;
	transition: all 0.3s linear;
}
.custom-selectbox.open:after{
	-webkit-transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	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">
	<select name="day" id="day" required="required">
		<option>-select-</option>
		<option value="1">1</option>
		<option value="2">2</option>
	</select>
</div>