您的位置:首页 >综合精选 >

cssinput样式怎么修改

跟大家讲解下有关cssinput样式怎么修改,相信小伙伴们对这个话题应该也很关注吧,现在就为小伙伴们说说cssinput样式怎么修改,小编也收集到了有关cssinput样式怎么修改的相关资料,希望大家看到了会喜欢。

css input样式修改的方法:1、利用伪类元素改变radio样式;2、利用label指向input,然后通过改变label样式来达到效果即可。

本文操作环境:Windows7系统、Dell G3电脑、HTML5&&CSS3版。

css改变input框样式

目前博主只知道两种方法,如果有同学有别的方法欢迎进行讨论

一:利用伪类元素改变radio样式 (此方法无需添加额外的标签,更便捷)

 .div input[type=radio]::after {     position: absolute;     width: 25px;     height: 25px;     background: url(../img/inputBG.jpg) no-repeat;     background-size: 100% 100%;   }

二:利用label指向input,通过改变label样式来达到效果

 <html>       <input type="checkbox" checked="checked" id="aa"/><label for="aa"></label>   </html>   <style>     input[type=checkbox]{        visibility: hidden;     }     label{       width:20px;       height:20px;       border:1px solid #707070;     }     input[type=checkbox]:checked + label{       background: url(../img/duigou.jpg)no-repeat;       background-size: 100% 100%;     }   </style>

【推荐学习:css视频教程】

以上就是css input样式怎么修改的详细内容,更多请关注php中文网其它相关文章!

来源:php中文网

免责声明:本文由用户上传,如有侵权请联系删除!