Question

我正在尝试重新选择框。想要添加一个CSS箭头（在缩放页面时看起来很漂亮），它会随着Select框的展开而旋转，但我无法根据Select框正确对齐箭头。试图使用来自互联网的一些代码，但它对我不起作用。当选择框展开时，也无法使箭头向下旋转。

问题：

如何正确对齐箭头？
如何在用户点击选择框时向下旋转？

这是小提琴：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;
}

Answer 1

以下是jsfiddle的答案：http://jsfiddle.net/ry7ykesy/3/

我在你提供的html结构中做了一处更改。

＆＃13;

/* 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;
	}
});

＆＃13;

/* 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);
}

＆＃13;

<!-- 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>

＆＃13;

Answer 2

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;
    display:inline-block;
}
.arrow:after {
    content: '';
    font: 1em"Consolas", monospace;
    width: 0;
    height: 0;
    position: absolute;
    right: 3px;
    top: 1px;
    margin-right: 0;
    border-width: 8px 0 8px 8px;
    border-style: solid;
    border-color: transparent #F15922;
    pointer-events: none;
    transition: all 0.3s linear;
}

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

.arrow:focus-within:after {
    right: 6px;
    transform: rotate(90deg);
}

<div class="arrow">
    <select name="day" id="day" required="required">
        <option></option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
</div>

如何添加箭头来选择？

2 个答案: