正文
css下拉框样式,html5 下拉框 标签
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
css怎样设置下拉列表(select)样式？
css设置下拉列表(select)样式首先我们需要获取到这个元素的id或者是class，然后在通过给这个元素设置它的width和height等等一些样式，具体的看代码:
html
head
style
.div1{
width:600px;
height:200px;
font-size:13px;
}
.div select{
width:200px;
}
.div select option{
width:150px;
height:30px;
}
/head
body
div class='div1'
select
option value="volvo"Volvo/option
option value="saab"Saab/option
option value="opel"Opel/option
option value="audi"Audi/option
/select
/div
/body
/html
相关问答
Q1: css改变下拉框的下拉小三角样式
select{
width: 90%;
padding: 8px 0;
font-size: 14px;
border: none;
outline: none;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
div:after{
content: "";
width: 13px;
height: 7px;
background: url(../../../images/about/sanjiaoxing2.png) no-repeat center;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
position: absolute;
right: 20px;
top: 45%;
//给自定义的图标实现点击下来功能
pointer-events: none;
}
Q2: 用css改变下拉框样式
例一：
＜select name="select" size="1" style="font-family:Verdana,Arial; font-size: 9pt; color: #FF0000"＞
＜option value="2" selected＞yesky.com＜/option＞
＜option value="1"＞redidea.net＜/option＞
＜/select＞
查一下手册,还有好多项可以设置.
例二：
html
head
style
.box
{
border: 1px solid #C0C0C0;
width: 182px;
height: 20px;
clip: rect( 0px, 181px, 20px, 0px );
overflow: hidden;
}
.box2
{
border: 1px solid #F4F4F4;
width: 180px;
height: 18px;
clip: rect( 0px, 179px, 18px, 0px );
overflow: hidden;
}
select
{
position: relative;
left: -2px;
top: -2px;
width: 183px;
line-height: 14px; color: #909993;
border-style: none;
border-width: 0px;
}
/style
/head
body
div class = boxdiv class = box2
select size = "1" name = "D1"
option内容一/option
option内容二/option
/select
/div/div
/body
/html
