css下拉框样式,html5 下拉框 标签

css怎样设置下拉列表(select)样式？

css设置下拉列表(select)样式首先我们需要获取到这个元素的id或者是class，然后在通过给这个元素设置它的width和height等等一些样式，具体的看代码:

目前累计服务客户1000+，积累了丰富的产品开发及服务经验。以网站设计水平和技术实力，树立企业形象，为客户提供网站制作、成都网站制作、网站策划、网页设计、网络营销、VI设计、网站改版、漏洞修补等服务。创新互联建站始终以务实、诚信为根本，不断创新和提高建站品质，通过对领先技术的掌握、对创意设计的研究、对客户形象的视觉传递、对应用系统的结合，为客户提供更好的一站式互联网解决方案，携手广大客户，共同发展进步。

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

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;

}

用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