標籤：二次開發 add 選擇 lock style 下拉框 相互 height eee
<!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屬性可以調整，歡迎探討！
純css實現select下拉框並排顯示
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
