本文摘自PHP中文网,作者不言,侵删。
对于文字和文本区域很容易设置各种样式,但是对于选择框、复选框等样式的设置可能就不会那么容易了,本篇文章就来给大家介绍一下如何使用CSS修改选择框样式。如何修改选择框样式
选择框是制作表单必不可少的一部分,还可以下拉以添加选择并自定义表单。
通过CSS自定义,你可以对选择框进行各种样式的设置。
此外,默认值是下拉菜单,但您可以使用size属性指定选项的显示行数。选择框中的选项使用<OPTION>标签来指定。
我们来看具体的代码
HTML
1 2 3 4 5 6 7 8 9 | < div class = "cp_ipselect cp_sl04" >
< select required>
< option value = "" hidden>请选择具体位置</ option >
< option value = "1" >合肥</ option >
< option value = "2" >南京</ option >
< option value = "3" >芜湖</ option >
< option value = "4" >上海</ option >
</ select >
</ div >
|
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | .cp_ipselect {
overflow : hidden ;
width : 90% ;
margin : 2em auto ;
text-align : center ;
}
.cp_ipselect select {
width : 100% ;
padding-right : 1em ;
cursor : pointer ;
text-indent : 0.01px ;
text- overflow : ellipsis;
border : none ;
outline : none ;
background : transparent ;
background-image : none ;
box-shadow: none ;
-webkit-appearance: none ;
appearance: none ;
}
.cp_ipselect select::-ms-expand {
display : none ;
}
.cp_ipselect.cp_sl 04 {
position : relative ;
border-radius: 2px ;
border : 2px solid #da3c41 ;
border-radius: 50px ;
background : #ffffff ;
}
.cp_ipselect.cp_sl 04: :before {
position : absolute ;
top : 0.8em ;
right : 0.8em ;
width : 0 ;
height : 0 ;
padding : 0 ;
content : '' ;
border-left : 6px solid transparent ;
border-right : 6px solid transparent ;
border-top : 6px solid #da3c41 ;
pointer-events: none ;
}
.cp_ipselect.cp_sl 04 select {
padding : 8px 38px 8px 8px ;
color : #da3c41 ;
}
|
在浏览器上显示的效果如下:
本篇文章到这里就全部结束了,更多相关精彩内容大家可以关注php中文网的CSS视频教程栏目!!!
以上就是如何使用CSS修改选择框样式的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css text-decoration-line属性怎么用
css如何设置td宽度
css可以去掉浮动吗?
请问css的作用是什么
css怎么绘制斜线
jsp怎么导入css
css如何设置圆角边框
css中display:hidden和display:none有什么区别
怎么在head区域引入css
css技巧:怎么给图片添加蒙版(分享)
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 如何使用CSS修改选择框样式