對於文字和文字區域很容易設定各種樣式,但是對於選擇框、複選框等樣式的設定可能就不會那麼容易了,本篇文章就來給大家介紹一下如何使用CSS修改選擇框樣式。
如何修改選擇框樣式
選擇框是製作表單必不可少的一部分,也可以下拉以新增選擇並自訂表單。
透過CSS自訂,你可以對選擇框進行各種樣式的設定。
此外,預設值是下拉式選單,但您可以使用size屬性指定選項的顯示行數。選擇框中的選項使用
我們來看具體的程式碼
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影片教學欄位! ! !
以上是如何使用CSS修改選擇框樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章!