css下拉框样式,css实现下拉框

如何用css更改表单元素如单选框或下拉框的默认样式

您好，如单选框，它会默认有一个圆形的选择框，如果觉得不好看，可以将这个标签定位到可视界面以外，因为你使用label标签是可以选中这个选择框的，你只需要更改该label标签的样式就行了

相关问答

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)样式？

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

Q3: 用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

Q4: CSS怎么改变表单下拉框箭头和滚动条样式

CSS改变流动条的样式，代码如下：

scrollbar-face-color:#FEFAF1; (立体滚动条凸出部分的颜色) 

scrollbar-highlight-color:#FEFAF1; (滚动条空白部分的颜色) 

scrollbar-shadow-color:#FEFAF1; (立体滚动条阴影的颜色) 

scrollbar-arrow-color:#E6C3B9;(上下按钮上三角箭头的颜色) 

scrollbar-base-color:#FEFAF1; (滚动条的基本颜色) 

scrollbar-darkshadow-color:#E6C3B9; (立体滚动条强阴影的颜色) 

scrollbar-3dlight-color:#E6C3B9;(滚动条亮边的颜色) 

scrollbar-track-color:#FEFAF1;} (滚动条的背景颜色)

CSS（层叠样式表）级联样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

Q5: 使用html和css实现元素下拉框的方法

以将 下拉菜单嵌入由盒子中 充当的按钮 为例来说明问题，以类选择器为button的盒子当作触发下拉菜单的容器(即是当鼠标移动到该按钮上面出现下拉框)，则必须将hover属性附着在按钮盒子的上一级盒子上，但是通常上一级的盒子比当前盒子大或者里面有多个小盒子，那么鼠标放在按钮外部和上一级盒子的内部仍然可以将下拉带单显示，于是尝试在按钮盒子的上一级加上了一个与按钮大小一样的按钮，并将下拉菜单附着于此。

第一想法就是给未显示（默认隐藏时）的下拉菜单栏添加，其结果就是边框一直处于显示状态，在下拉菜单栏隐藏时无法隐藏。解决方法就是将边框的属性加在hover属性里面，未显示时的边框设置为零。

未显示时属性为（ display: none;）显示时属性为（display: block;），结果就是能够显示与隐藏，但是动画效果没有表现出来。想不通...

除了使用display的属性之外，还可以使用：下拉菜单栏的隐藏通过使菜单栏的属性overflow: hidden; 来实现。

list中（隐藏时）的height设置为零，hover中（显示时）的height设置为110px，使用动画transition属性来过渡。

同样是通过overflow: hidden;实现隐藏，但是是通过visibility:visible;显示隐藏，动画效果仍然有效。

就是相比方法二将hover里面的属性由display: block; 改为visibility:visible;

以上均为鄙人实践的结果，理解甚微，纰漏繁多，还请斧正。

比如说：下拉菜单收起时的动画没有搞明白怎样控制，而且下拉菜单收起时的动画没有边框；假如使用visibility: hidden;和visibility:visible;实现隐藏和显示时，会出现动画效果播放完之前，下拉菜单栏内容已经展示出来。