怎样用cssselect下拉框的美化

用cssselect下拉框的美化

10多年建站经验， 成都网站设计、做网站客户的见证与正确选择。成都创新互联公司提供完善的营销型网页建站明细报价表。后期开发更加便捷高效，我们致力于追求更美、更快、更规范。

这个可以换种方式实现，首先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辅助）。

CSS 如何恢复到默认样式？

有时候在写CSS的过程中，某些限制总是不起作用，这就涉及了CSS样式覆盖的问题。

查找一些教材中（w3schools等），只说css的顺序是“元素上的style” “文件头上的style元素” “外部样式文件”，但对于样式文件中的多个相同样式的优先级怎样排列，没有详细说明。经过测试和继续搜索，得知优先级如下排列：

1. 样式表的元素选择器选择越精确，则其中的样式优先级越高：

id选择器指定的样式 类选择器指定的样式 元素类型选择器指定的样式所以上例中，#navigator的样式优先级大于.current_block的优先级，及时.current_block是最新添加的，也不起作用。

2. 对于相同类型选择器制定的样式，在样式表文件中，越靠后的优先级越高

注意，这里是样式表文件中越靠后的优先级越高，而不是在元素class出现的顺序。比如.class2 在样式表中出现在.class1之后：

.class1 { color: black;}

.class2 { color: red; }

.class1 {color: black;}

.class2 {color: red;}

而某个元素指定class时采用 class="class2 class1"这种方式指定，此时虽然class1在元素中指定时排在class2的后面，但因为在样式表文件中class1处于class2前面，此时仍然是class2的优先级更高，color的属性为red，而非black。

3. 如果要让某个样式的优先级变高，可以使用!important来指定：

.class1 {color: black !important;}  

.class2{color: red;}

如何用css样式去掉默认设备或者浏览器的默认样式

手机设备下的界面

正常浏览器下的html5界面

要解决该问题需要加入一些css样式,如下：

input[type="button"], input[type="submit"], input[type="reset"] {

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

}

如果还有圆角的问题，

.button{ border-radius: 0; }

在写表单时候会发现一些浏览器对表单赋了默认的样式，如在谷歌浏览器下，文本框和下拉选择框当载入焦点时，会出现发光的边框！文本框textarea可以自由拖拽拉大！在IE10下，文本框输入内容后，会在右侧出现一个小叉叉。面对这些问题，下面来看看解决方法。

去除谷歌等浏览器文本框默认发光边框

input:focus, textarea:focus {

outline: none;

}

去掉高光样式：

input:focus{

-webkit-tap-highlight-color:rgba(0,0,0,0);

-webkit-user-modify:read-write-plaintext-only;

}

也可以重新根据自己的需要设置一下，如：

input:focus,textarea:focus {

outline: none;

border: 1px solid #f60;

}

这样的话，当文本框载入焦点时，边框颜色就会变为橙色，增强用户体验！

去除IE10+浏览器文本框后面的小叉叉

input::-ms-clear {

display: none;

}

禁止多行文本框textarea拖拽

添加属性多行文本框就不能拖拽放大缩小了：

textarea {

resize: none;

}

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

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

select 下拉列表框 css样式 长度问题

默认是这样的，你想修改长度还是想解决什么问题。

如果是想修改长度，select style="width:设置你想要的长度"

这样就可以修改长度了

请问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、网络搜索下拉框美化插件。

网页名称：css下拉框默认样式,css设置下拉框样式
新闻来源：http://scyanting.com/article/dsiieoe.html