如何修改选择框样式

 

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

 

　　通过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;

 

　　}






本文转载自中文网