使用CSS修改选择框样式的方法

　　介绍

这篇文章主要介绍了使用CSS修改选择框样式的方法,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

<>强如何修改选择框样式

选择框是制作表单必不可少的一部分,还可以下拉以添加选择并自定义表单。

通过CSS自定义,你可以对选择框进行各种样式的设置。

此外,默认值是下拉菜单,但您可以使用大小属性指定选项的显示行数。选择框中的选项使用& lt; OPTION>标签来指定。

<强>我们来看具体的代码

HTML

& lt; div类=癱p_ipselect cp_sl04"比; 　　& lt;选择required> 　　& lt;选项值=https://www.yisu.com/zixun/薄耙?请选择具体位置 　　<选项值=" 1 ">合肥> 南京 　　<选项值=3>芜湖> 上海 　　 　　
CSS

。cp_ipselect { 　　溢出:隐藏; 　　宽度:90%; 　　保证金:2 em汽车; 　　text-align:中心; 　　} 　　.cp_ipselect选择{ 　　宽度:100%; 　　padding-right: 1 em; 　　光标:指针; 　　indent: 0.01 px; 　　文本溢出:省略; 　　边界:没有; 　　大纲:没有; 　　背景:透明; 　　背景图片:没有; 　　不必:没有; 　　-webkit-appearance:没有; 　　外观:无; 　　} 　　.cp_ipselect选择:-ms-expand { 　　显示:没有; 　　} 　　.cp_ipselect。cp_sl04 { 　　位置:相对; 　　border - radius: 2 px; 　　边界:2 px固体# da3c41; 　　border - radius: 50 px; 　　背景:# ffffff; 　　} 　　.cp_ipselect。{前cp_sl04:: 　　位置:绝对的; 　　上图:0.8 em; 　　右:0.8 em; 　　宽度:0; 　　高度:0; 　　填充:0; 　　内容:& # 39;& # 39;; 　　border-left: 6 px固体透明; 　　边境:6 px固体透明; 　　border-top: 6 px固体# da3c41; 　　pointer-events:没有; 　　} 　　.cp_ipselect。cp_sl04选择{ 　　填充:8 px 38 px 8 px 8 px; 　　颜色:# da3c41; 　　}

在浏览器上显示的效果如下:

使用CSS修改选择框样式的方法

感谢你能够认真阅读完这篇文章,希望小编分享使用CSS修改选择框样式的方法内容对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,遇到问题就找,详细的解决方法等着你来学习!

使用CSS修改选择框样式的方法