CSS下拉框是網頁設計中常見的元素,可以通過下拉列表來選擇選項。下拉框有很多種樣式,其中一種是有線的下拉框,可以通過CSS來實現。
<style> /* 定義select樣式 */ select { /* 隱藏原有的下拉箭頭 */ -webkit-appearance:none; -moz-appearance:none; appearance:none; /* 寬度100% */ width:100%; /* 高度30px */ height:30px; /* 去除默認樣式 */ border:none; background:none; margin:0; padding:0; outline:none; /* 設置字體 */ font-size:14px; font-family: Arial, Helvetica, sans-serif; /* 添加下劃線 */ border-bottom:1px solid #999; } /* 鼠標懸停時添加下劃線樣式 */ select:hover { border-bottom:1px solid #555; } </style>
以上代碼定義了一個樣式為select的元素,在樣式中設置了下拉框的寬度、高度、字體等樣式屬性,并添加了下劃線樣式。通過border-bottom屬性添加下劃線樣式,并在鼠標懸停時修改下劃線樣式顏色。
在HTML代碼中引用定義好的樣式即可:
<select> <option value="1">選項1</option> <option value="2">選項2</option> <option value="3">選項3</option> </select>
通過以上代碼定義一個簡單的下拉框,使用定義好的樣式即可實現有線的下拉框樣式。