正文
css定义下拉框样式,html下拉框的css代码
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
用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
相关问答
Q1: 单选框、复选框、下拉框的CSS怎么写？
简单的代码实现，仅供参考：
单选框：
body input type="radio" name="sex" value="n" / input type="radio" name="sex" value="v" //body
复选框：
body input type="checkbox" value="n" / input type="checkbox" value="v" //body
下拉框：
body select optionn/option optionn/option optionn/option /select/body
扩展资料：
css注意事项
1、每个标签的属性设置必须是被一对花括号包含。像下面的样子：
标签
{
属性名称：属性值;
}
2、花括号中每个属性值赋值后必须用分号隔开。分号就相当于C#和C中的分号，指示一行语句的结束，加上分号就是和网页的解释器说明这个属性的赋值已经结束了，下面开始一个新的属性的赋值。正确的格式是下面的样子：
标签
{
属性名称1：属性值;
属性名称2：属性值;
属性名称3：属性值;
}
3、关于颜色值。我们在前面的文章中，在设置style时，不论是color属性还是background-color属性，赋值时都是指定的颜色名称。这种方式在网页编程中比较不通用。比较常用的做法是赋16进制值，类似于#RRGGBB这种样式，每一位的取值都是从1到F，每两位对应一类颜色值。具体的颜色值可以在网上搜到。
4、关于字体。我们在style中的font-family中设置字体。有时候我们设置的字体可能用户电脑中没有，这时候我们可以在font-family中设置多个可选字体，用逗号分隔，这样如果前面的字体用户电脑中没有，则可以使用后面的字体进行替换。下面是个例子：
p sytle="font-family:serif,Cursive,Fantasy;"
参考资料来源：百度百科：CSS
Q2: 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;
}
Q3: 如何用css做下拉菜单
纯CSS的下拉菜单，此处理解的意思就是li标签套li标签，然后再给li标签设置样式。在被套的li标签设置平时状态为隐藏，再等鼠标移动到上一个li标签时，将被套的li标签显示（样式：overflow:hidden; ）。
贴一段网上摘的纯CSS下拉菜单（二级）
!DOCTYPE HTML
html
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
title利用float制作兼容ie6纯css下来菜单/title
style type="text/css"
* { margin:0; padding:0; }
ul { list-style:none; }
a:hover {color:#555; }
.nav { float:left; overflow:hidden; text-align:center; font-size:14px; }
.nav dd { float:left; width:300px; margin:-888px -150px 0 0; }
.nav dd a { float:left; margin-top:888px; display:block; position:relative; background:#eee; width:150px; height:30px; line-height:30px; border-bottom:1px solid #fff; }
.nav a:hover { margin-right:1px; background:#3cf; }
.nav dd ul { float:left; font-size:0; z-index:888; }
.nav dd li a { clear:left; width:150px; margin-top:0; font-size:14px; }
.nav dd li a:hover { margin-right:1px; }
/style
/head
body
dl class="nav"
dda href=""首页/a/dd
dd
a href=""关于我们/a
ul
lia href=""公司简介/a/li
lia href=""公司文化/a/li
lia href=""企业荣誉/a/li
lia href=""联系我们/a/li
/ul
/dd
dd
a href=""新闻动态/a
ul
lia href=""国内新闻/a/li
lia href=""国外新闻/a/li
/ul
/dd
dd
a href=""产品展示/a
ul
lia href=""111/a/li
lia href=""222/a/li
/ul
/dd
/dl
/body
/html
Q4: 怎样用cssselect下拉框的美化
用cssselect下拉框的美化
这个可以换种方式实现，首先select的样式每个浏览器都有其默认的样式，需要先去除这些默认样式，其次，select里面的样式诸如箭头，下拉框等等的样式，这里提供一种思路，就是在select的外层添加一个div，对这个div元素设置样式，select元素则是没样式，从而达到一种掩眼法的效果，实现方式如下：
!-- html 布局 --
div id="selectStyle"
select id="select"
optionoption 1/option
optionoption 2/option
optionoption 3/option
optionoption 4/option
optionoption 5/option
/select
/div
首先要去掉 #select 的默认样式：
/* 去掉默认样式，设置新的样式 */
#select{
display:block;
width:100%;
height:100%;
box-sizing:border-box;
background:none;
border:1px solid #222;
outline:none;
-webkit-appearance:none;
padding:0 5px;
line-height:inherit;
color:inherit;
cursor:default;
font-size:14px;
position:relative;
z-index:3;
}
#select option{
color:#222;
}
#select option:hover{
color:#fff;
}
#select option:checked{
background:#535353;
color:#fff;
}
然后在外层div#selectStyle设置自定义样式
#selectStyle{
display:block;
margin:0 auto;
overflow:hidden;
height:30px;
width:240px;
border-radius:0;
background:#535353 url("箭头图片地址") right center no-repeat;
background-size:auto 80%;
color:#fff;
line-height:2;
/* 如果不想加图片，
则可以设置一个自己的三角形样式，
如下的自定义方式，
见代码1 */
position:relative;
z-index:1;
}
/* 代码1 */
#selectStyle:before{
position:absolute;
z-index:1;
top:50%;
right:10px;
margin-top:-2.5px;
display:block;
width:0;
height:0;
border-style:solid;
border-width:5px 5px 0 5px;
border-color:#fff transparent transparent transparent;
content:"";
}
/* 代码1 */
#selectStyle:after{
position:absolute;
z-index:1;
top:50%;
right:10px;
margin-top:-3.5px;
display:block;
width:0;
height:0;
border-style:solid;
border-width:5px 5px 0 5px;
border-color:#535353 transparent transparent transparent;
content:"";
}
以上就是自定义select样式的方法；
同时也可以完全不要select这个元素使用div+css来自定义一个跟select一样效果的下拉框（需要Javascript辅助）。
Q5: 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
