互联网常识:cssinput样式怎么修改

导读跟大家讲解下有关cssinput样式怎么修改,相信小伙伴们对这个话题应该也很关注吧,现在就为小伙伴们说说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中文网

THE END
分享
二维码
海报
互联网常识:cssinput样式怎么修改
导读跟大家讲解下有关cssinput样式怎么修改,相信小伙伴们对这个话题应该也很关注吧,现在就为小伙伴们说说cssinput样式怎么修改,小编也收 跟大家讲解下有……
<<上一篇
下一篇>>