怎么用CSS修改選擇框樣式

這篇文章主要介紹怎么用CSS修改選擇框樣式，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

　　如何修改選擇框樣式

　　選擇框是制作表單必不可少的一部分，還可以下拉以添加選擇并自定義表單。

　　通過CSS自定義，你可以對選擇框進行各種樣式的設置。

　　此外，默認值是下拉菜單，但您可以使用size屬性指定選項的顯示行數(shù)。選擇框中的選項使用<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修改選擇框樣式”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業(yè)資訊頻道！