HTML选择下拉菜单自定义箭头CSS [英] HTML select dropdown custom arrow css
本文介绍了HTML选择下拉菜单自定义箭头CSS的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图将自定义箭头用于代码中提到的下拉菜单.我在这里面临两个问题.
I am trying to use a custom arrow for a dropdown menu as mentioned in the code. I am facing two issues here.
1.无法将箭头部分放置在下拉菜单旁边.
1.unable to place the arrow section adjacent to the dropdwon.
2.此自定义箭头不可单击.
2.This custom arrow is not clickable.
如何实现这两个目标?
我尝试在:after
部分中使用 z-index; -1
.但是它没有按预期工作.
I tried to use z-index;-1
for the :after
section. But its not working as expected.
.expenses_div {
width:90% !important;
margin:auto;
margin-top:2%;
}
.expenses_div_left{
height:40px;
line-height:40px;
background-color:black;
float:left;
display: inline-block;
text-align:left;
padding-left:12px;
color:white;
width:48%;
font-size: 14px !important;
font-family : "Montserrat",sans-serif !important;
}
.expenses_div_right{
height: 40px !important;
line-height: 40px !important;
width:48%;
float:left;
display: inline-block;
cursor:pointer;
background:transparent !important;
}
.expenses_div_right select {
font-family : "Montserrat",sans-serif !important;
background:transparent !important;
appearance:none !important;
-moz-appearance:none !important;
-webkit-appearance:none !important;
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
border: 1px solid black !important;
width:100%!important;
color:black !important;
height:40px;
text-align:left !important;
font-size: 14px !important;
outline: none;
background-color:none !important;
position: relative !important;
cursor:pointer;
padding-left:12px;
}
.expenses_div_right:after {
content: '< >';
font: 16px "Consolas", monospace;
font-weight:bold;
color: white;
background-color:black;
display:inline-block;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
position: relative;
width:40px;
height:40px;
text-align:center;
line-height:40px;
overflow:hidden !important;
cursor:pointer;
}
<div class="expenses_div">
<div class="expenses_div_left" >How to Proceed</div>
<div class="expenses_div_right" >
<select name="main_selection" id="main_selection" >
<option selected value="">Select an option</option>
<option value="new_data">New Data</option>
<option value="analize_data">Analyze Data</option>
<option value="refresh_data">Refresh Data</option>
</select>
</div>
</div>
推荐答案
位置并单击!
评论的更改:
代码段:
.expenses_div {
width:90% !important;
margin:auto;
margin-top:2%;
}
.expenses_div_left{
height:40px;
line-height:40px;
background-color:black;
float:left;
display: inline-block;
text-align:left;
padding-left:12px;
color:white;
width:48%;
font-size: 14px !important;
font-family : "Montserrat",sans-serif !important;
}
.expenses_div_right{
height: 40px !important;
line-height: 40px !important;
width:48%;
float:left;
display: inline-block;
cursor:pointer;
background:transparent !important;
position:relative;/*Added (Because :after should be relative to this not whole page! )*/
}
.expenses_div_right select {
font-family : "Montserrat",sans-serif !important;
background:transparent !important;
appearance:none !important;
-moz-appearance:none !important;
-webkit-appearance:none !important;
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
border: 1px solid black !important;
width:100%!important;
color:black !important;
height:40px;
text-align:left !important;
font-size: 14px !important;
outline: none;
background-color:none !important;
position: relative !important;
cursor:pointer;
padding-left:12px;
}
.expenses_div_right:after {
content: '< >';
font: 16px "Consolas", monospace;
font-weight:bold;
color: white;
background-color:black;
display:inline-block;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
position: absolute;/*Changed to absolute*/
top:0;/*Added*/
right:0;/*Added*/
width:40px;
height:40px;
text-align:center;
line-height:40px;
overflow:hidden !important;
cursor:pointer;
z-index :-1 ;/*Added ( For Your 2nd Question )*/
}
<div class="expenses_div">
<div class="expenses_div_left" >How to Proceed</div>
<div class="expenses_div_right" >
<select name="main_selection" id="main_selection" >
<option selected value="">Select an option</option>
<option value="new_data">New Data</option>
<option value="analize_data">Analyze Data</option>
<option value="refresh_data">Refresh Data</option>
</select>
</div>
</div>
我认为这对您有帮助!
这篇关于HTML选择下拉菜单自定义箭头CSS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文