设计多彩下拉列表样式
2015-05-30 12:17
567 查看
多彩下拉列表样式:
样式显示:
<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>多彩下拉菜单</title> <style type="text/css"> body{background-color:#999999;} select{ width:60px; } form{ color:#FFFFFF; font-size:16px; font-weight:800px; font-family:"新宋体"; } .r{background-color:#FF0000; color:#000;} .o{background-color:#FF9900; color:#000;} .y{background-color:#FFFF00; color:#000;} .g{background-color:#009900; color:#000;} .q{background-color:#21b9b4; color:#000;} .b{background-color:#0000FF; color:#000;} .z{background-color:#7c176a; color:#000;} </style> </head> <body> <form action=""> <label for="color">请你选择你喜欢的一种颜色:</label> <select name="" id="color"> <option class="r">红</option> <option class="o">橙</option> <option class="y">黄</option> <option class="g">绿</option> <option class="q">蓝</option> <option class="b">锭</option> <option class="z">紫</option> </select> </form> </body> </html>
样式显示:
相关文章推荐
- css设计指南中有意思的部分
- css3 display:box box-flex 实现未知高度节点相对父级垂直居中
- css-backgournd-position详解
- 图解利用CSS实现三角形
- CSS Hack技术详解,支持IE 6-11、Chrome、FireFox、Safari、Opera 6-11、Chrome、FireFox、Safari、Opera6-11、Chrome、Fi...
- [css][移动设备]禁止横竖屏时内容自动调整
- CSS知识总结
- 【从0到1学Web前端】CSS定位问题三(相对定位,绝对定位)
- 【从0到1学Web前端】CSS定位问题三(相对定位,绝对定位)
- 【从0到1学Web前端】CSS定位问题三(相对定位,绝对定位) 分类: HTML+CSS 2015-05-29 23:01 842人阅读 评论(0) 收藏
- css伪类 附加一般导航栏代码
- css编写规范
- CSS--使用Animate.css制作动画效果
- 盒子模型与定位
- CSS命名规则规范整理
- 语义化命名
- 带缺口的圆环CSS3 Loading动画
- 浏览器的兼容性问题实质是CSS的兼容性问题,不是Html的兼容性问题
- 浏览器的兼容性问题实质是CSS的兼容性问题,不是Html的兼容问题
- 浏览器的兼容性问题实质是CSS的兼容性问题