css下拉框默认样式,css设置下拉框样式
怎样用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://pwwzsj.com/article/dsiieoe.html