我們在網頁設計中經常會使用select這個元素，但是這個元素的樣式往往會顯得很丑陋。那么，如何美化select元素呢？下面就讓我們來學習純CSS美化select的方法。 首先，我們需要定義一個含有選項列表的select元素。接下來，我們可以通過以下幾個步驟來對它進行美化。 第一步，改變select元素的樣式。我們可以去除它的邊框，改變它的背景顏色，并設置它的字體大小。 ``` pre { font-size: 16px; background-color: #fff; border: none; outline: none; cursor: pointer; } ``` 第二步，使用偽類選擇器對點擊后的樣式進行修改。當select元素被點擊時，我們改變它的背景顏色和字體顏色， ``` pre:focus { color: #000; background-color: #fff; } ``` 第三步，美化下拉框的樣式。此時，我們可以通過在select元素中再嵌套一個option元素的方式來實現。我們可以去除option元素的默認樣式，設置它的背景顏色、字體大小，并且給它添加一個hover樣式。 ``` p { font-size: 20px; } pre option { background-color: #fff; font-size: 16px; } pre option:hover { background-color: #f1f1f1; } ``` 通過以上三個步驟，我們就可以使用純CSS美化select元素了。這樣，我們就可以在網頁設計中更好的使用select元素，讓網站盡顯優美。