如何添加箭头来选择？

问题描述

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

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.

问题：

1. 如何正确对齐箭头？

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

推荐答案

以下是你在jsfiddle的回答：

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

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

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>

这篇关于如何添加箭头来选择？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！