<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } select { text-align: center; height: 50px; overflow: hidden; border: none; outline: none; background: #eee; border-radius: 10px; } option{ width: 150px; height: 40px; font-size: 20px; display: inline-block; border-radius: 10px; padding-top: 10px; } </style> </head> <body> <select name="toppings" multiple="multiple"> <option value="mushrooms" selected="selected">mushrooms</option> <option value="greenpeppers">green peppers</option> </select> </body> </html>
項目需求：讓option選項並排顯示，同時隱去select那丑陋的默認選擇小三角
總結：網上純css改默認樣式的方法看了一些，基本都是一個套路，而且相互抄襲，這倒沒什么，關鍵是試了一下，不起作用。還有一個套路就是重新布局模擬select，因為項目是二次開發，為避免修改前后台表單驗證，沒有采用這個方案。而反觀以上代碼，功能實現了，但有個缺點就是默認選中背景色和點擊選中背景色沒法調整，不知道是否有相應css屬性可以調整，歡迎探討！