怎么用CSS修改选择框样式

这篇文章主要介绍怎么用CSS修改选择框样式，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

　　如何修改选择框样式

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

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

　　此外，默认值是下拉菜单，但您可以使用size属性指定选项的显示行数。选择框中的选项使用<OPTioN>标签来指定。

　　我们来看具体的代码

　　html

　　<divclass="cp_ipselectcp_sl04">

　　<selectrequired>

　　<optionvalue=""hidden>请选择具体位置</option>

　　<optionvalue="1">合肥</option>

　　<optionvalue="2">南京</option>

　　<optionvalue="3">芜湖</option>

　　<optionvalue="4">上海</option>

　　</select>

　　</div>

　　CSS

　　.cp_ipselect{

　　overflow:hidden;

　　width:90%;

　　margin:2emauto;

　　text-align:center;

　　}

　　.cp_ipselectselect{

　　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_ipselectselect::-ms-expand{

　　display:none;

　　}

　　.cp_ipselect.cp_sl04{

　　position:relative;

　　border-radius:2px;

　　border:2pxsolid#da3c41;

　　border-radius:50px;

　　background:#ffffff;

　　}

　　.cp_ipselect.cp_sl04::before{

　　position:absolute;

　　top:0.8em;

　　right:0.8em;

　　width:0;

　　height:0;

　　padding:0;

　　content:'';

　　border-left:6pxsolidtransparent;

　　border-right:6pxsolidtransparent;

　　border-top:6pxsolid#da3c41;

　　pointer-events:none;

　　}

　　.cp_ipselect.cp_sl04select{

　　padding:8px38px8px8px;

　　color:#da3c41;

　　}

以上是“怎么用CSS修改选择框样式”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网node.js频道！