如何添加箭头进行选择？
如何添加箭头进行选择？
提问于 2013-08-07 02:00:55
我正在尝试重新设置选择框的样式。我想添加一个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;
}回答 2
Stack Overflow用户
发布于 2014-09-19 12:02:05
这是你在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) {
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>
Stack Overflow用户
发布于 2021-04-11 20:24:55
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18087241
复制相关文章
相似问题