好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

表单美化_html/css_WEB-ITnose

目录 [1]单选按钮 [2]多选按钮 [3]下拉列表

前面的话

  由于一些系统原生的表单控件在各个浏览器中显示效果不一致,且无法设置某些关键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的详细内容...

  阅读:29次