标签：二次开发 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属性可以调整，欢迎探讨！
标签：二次开发 add 选择 lock style 下拉框 相互 height eee
原文地址：http://www.cnblogs.com/hcxy/p/6821139.html
