使用纯css给radio类型框添加样式


  我们知道input的radio复选框是不能设置样式的,但由于项目的需要,可能我们需要给标签添加更多的样式,以满足需求,下面我就给大家写一下我所用的方法。

  首先我们可以通过一个span标签或其他标签来设置样式,然后动态的选择样式可以使用“~”或“+”符号来表示兄弟级之间选择器的变化,然后通过Input的checked状态下改变span的样式,代码如下:

Radio样式:.frozen-way label input[type="radio"]:checked ~ .border-radio {
    border-color: #1A76AA;
}
.frozen-way label input[type="radio"]:checked ~ .border-radio .y-radio {
    display: block;
}

  这样就实现了原生复选框的样式了,是不是很简单?!


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM