CSS里的下拉列表是網站中必不可少的元素之一，一般被用于表單中選項的選擇，下面來介紹一下怎么用CSS做下拉列表。
首先，在HTML里，需要使用
/* 下拉列表的樣式 */
select{
height: 30px; /* 設置下拉列表高度 */
width: 200px; /* 設置下拉列表寬度 */
padding: 5px; /* 設置邊距 */}
/* 當下拉列表被懸停時，改變樣式 */
select:hover{
color: #fff; /* 改變字體顏色 */
background-color: #555; /* 改變背景顏色 */接下來，我們來利用偽元素:before和:after來進一步美化下拉列表。代碼如下：
/* 下拉列表的樣式 */
select{
height: 30px;
width: 200px;
padding: 5px;
background-color: #fff;
border: none; /* 去掉下拉列表的邊框 */
-webkit-appearance:none; /* 去掉默認樣式 */
-moz-appearance:none;} /* 去掉默認樣式 */
/* 給下拉列表的選項添加偽元素 */
select option:before{
content: '\2022'; /* 添加實心點 */
margin-right: 5px;} /* 實心點和選項文字之間的距離 */
select option:after{
content: '';} /* 清除實心點后方的特殊字符 */
/* 當下拉列表被懸停時，改變樣式 */
select:hover{
cursor: pointer;} /* 鼠標懸停時顯現手型 */通過以上樣式的設置，我們就可以得到一個美觀實用的下拉列表了。希望以上內容對你有所幫助。
上一篇mysql中的游標關鍵字
下一篇用css做個app界面