CSS可輸入的下拉框是一種非常便捷的用戶界面元素,它是用HTML中的
下面是一個例子,我們將使用CSS樣式來實現可輸入的下拉框:
<select class="styled-select" name="select"><option value="1">Option 1</option><option value="2">Option 2</option><option value="3">Option 3</option><option value="4">Option 4</option><option value="5">Option 5</option></select>/* CSS樣式 */ .styled-select { width: 240px; height: 29px; padding: 5px 10px; font-size: 16px; border: none; border-radius: 0; background-color: #f5f5f5; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .styled-select:focus { outline: none; box-shadow: none; } .styled-select option:hover, .styled-select option:focus { background-color: #e3e3e3; } .styled-select option:checked { background-color: #0077cc; color: #fff; }
現在我們來解釋一下這個樣式的含義。
首先,我們為
接下來,我們又加入了:focus偽類,當下拉框獲得焦點時,我們將取消它的輪廓和陰影。
最后,我們設置了option的樣式,包括鼠標懸停時和獲得焦點時的背景顏色,并設定選中值的背景顏色和字體顏色。
在實現CSS可輸入的下拉框時,可以添加自己的樣式,使其更符合自己的品牌視覺風格。在此之前,請務必確保不影響下拉框的可用性和可訪問性。