对于文字和文本区域很容易设置各种样式，但是对于选择框、复选框等样式的设置可能就不会那么容易了，本篇文章就来给大家介绍一下如何使用CSS修改选择框样式。
如何修改选择框样式
选择框是制作表单必不可少的一部分，还可以下拉以添加选择并自定义表单。
通过CSS自定义，你可以对选择框进行各种样式的设置。
此外，默认值是下拉菜单，但您可以使用size属性指定选项的显示行数。选择框中的选项使用<OPTION>标签来指定。
我们来看具体的代码
HTML
<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
.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_sl04 { position: relative; border-radius: 2px; border: 2px solid #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: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #da3c41; pointer-events: none;}.cp_ipselect.cp_sl04 select { padding: 8px 38px 8px 8px; color: #da3c41;}在浏览器上显示的效果如下：
本篇文章到这里就全部结束了，更多相关精彩内容大家可以关注php中文网的CSS视频教程栏目！！！
