CSS给select下拉列表的文字增加背景色

发布时间：2018-09-13 12:09:40 所属栏目：专访来源：站长网

导读：CSS给Selcet下拉列表的选项增加背景色，看上去更醒目一些，加背景颜色实际也挺简单，说的再好不如自己看一下，你看了代码就知道了。演示： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit

　　CSS给Selcet下拉列表的选项增加背景色，看上去更醒目一些，加背景颜色实际也挺简单，说的再好不如自己看一下，你看了代码就知道了。

　　演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>给下拉列表的文字增加背景颜色</title> <style> h1 { font: 1.2em Arial, Helvetica, sans-serif; } input.txt { color: #00008B; background-color: #E3F2F7; border: 1px inset #00008B; width: 200px; } input.btn { color: #00008B; background-color: #ADD8E6; border: 1px outset #00008B; } form p { clear: left; margin: 0; padding: 0; padding-top: 5px; } form p label { float: left; width: 40%; font: bold 0.9em Arial, Helvetica, sans-serif; } .blue { background-color: #ADD8E6; color: #000000; } .red { background-color: #E20A0A; color: #ffffff; } .green { background-color: #3CB371; color: #ffffff; } .yellow { background-color: #FAFAD2; color: #000000; } </style> </head> <body> <form method="post" action="example8.html"> <p> <label for="color">Select your favorite color:</label> <select name="color" id="color"> <option value="">Select One</option> <option value="blue" class="blue">blue</option> <option value="red" class="red">red</option> <option value="green" class="green">green</option> <option value="yellow" class="yellow">yellow</option> </select> </p> <p> <input type="submit" name="btnSubmit" id="btnSubmit" value="Send!" class="btn" /> </p> </form> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：常州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!