前面的话
由于一些系统原生的表单控件在各个浏览器中显示效果不一致,且无法设置某些关键CSS样式,为了保证表单在各浏览器中的兼容性,表单美化就是不得不做的一件事了
单选按钮
【实现效果】
【实现过程】
body{ margin: 0; font: 16px/20px "宋体";}.box{ width: 500px; height: 100px; line-height: 100px; margin: 0 auto; border: 1px solid black; text-align: center;}.box label{ position:relative; padding-left: 20px;}.box input{ visibility: hidden;} .box i{ position: absolute; top: -2px; left: -2px; height: 19px; width: 19px; background: url('http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/radiobutton.gif') no-repeat -14px -18px;}.box label:hover{ color: red;}.box label:hover i{ background-position: -14px -118px;}.box label.selected i{ background-position: -14px -218px;}
选择一项游戏方式: 咻一咻 摇一摇 扭一扭
查看更多关于表单美化_html/css_WEB-ITnose的详细内容...
声明:本文来自网络,不代表【好得很程序员自学网】立场,转载请注明出处:http://www.haodehen.cn/did110947