正文
关于cssselect样式的信息
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
怎么用纯css改变select的样式
举个例子，照着做就可以了
style type="text/css"
!--
.select * {
margin: 0;
padding: 0;
}
.select {
border:1px solid #cccccc;
float: left;
display: inline;
}
.select div {
border:1px solid #f9f9f9;
float: left;
}
/* 子选择器，在FF等非IE浏览器中识别 */
.selectdiv {
width:120px;
height: 17px;
overflow:hidden;
}
/* 通配选择符，只在IE浏览器中识别 */
* html .select div select {
display:block;
float: left;
margin: -2px;
}
.select divselect {
display:block;
width:124px;
float:none;
margin: -2px;
padding: 0px;
}
.select:hover {
border:1px solid #666666; //鼠标移上的效果
}
.select selectoption {
text-indent: 2px; //option在FF等非IE浏览器缩进2px
}
--
/style
/head
bodydiv class="select"
div
select
option看见效果了吧/option
option看见效果了吧/option
option看见效果了吧/option
/select
/div
/div
你看看这段代码中对select的设置
相关问答
Q1: 请问CSS中怎么设置select（列表/菜单）的样式？
1、css没有办法实现美化select下拉框的。不管怎么设定都没有用的
2、可以通过div+css+jq自己模拟一款css
div class="select"
div class="select_default"/div !--这边是默认展示我们选中的框--
ul class="select_item" !--实则所有的下拉选项隐藏了，在这个ul中--
liComplex/li
liKnowledge/li
liCase/li
liArticle/li
liNews/li
/ul
/div
然后结合jq语法，实现点击出现下拉，点击下拉吧文本赋值到div里头
3、网络搜索下拉框美化插件。
Q2: 怎么设置下拉列表的背景和下拉的小三角样式
select {
/*背景：和其他元素一样，都是设置 background 属性*/
background:#F00
/*三角1：先将默认的select选择框样式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
/*三角2：在选择框的最右侧中间显示小箭头图片*/
background: url('XXXXXX/XXXXXX/XXXXXX/xxxxxx.png') no-repeat scroll right center transparent;
/*三角3：为下拉小箭头留出一点位置，避免被文字覆盖*/
padding-right: 14px;
}
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: none; }
Q3: 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
Q4: HTML CSS 中select标签的样式怎么设置啊？
select 的css有效的样式很有限，很多多是无效， color，font-size，font-family都能生效的
