通过label标签重置input[radio]样式

最新推荐文章于 2024-07-29 16:22:26 发布

Tomhs3000

最新推荐文章于 2024-07-29 16:22:26 发布

阅读量5.6k

点赞数 1

分类专栏： css 文章标签： css label input radio

本文链接：https://blog.csdn.net/Tomhs3000/article/details/79045746

版权

本文介绍了如何利用label标签来重置input[type=radio]的样式，通过将input与label绑定，并结合span元素展示说明文字，实现美观的自定义样式。

摘要由CSDN通过智能技术生成

一、基于默认的input[radio]标签很丑，很多时候都需要重写样式，下面就介绍下通过label标签重置input[radio]标签的方法；

二、准备首先我们需要给lable标签绑定input，然后再通过一个标签包含说明文字（这里选用span标签），代码如下

<div class="wrap">   
    <input type="radio" id="option1" name="mode" value = "0" class="option-radio" checked />
    <label id="firstLabel" for="option1"><span class="">这是一行优雅的代码</span>  </label>
    <input type="radio" id="option2" name="mode" value = "1" class="option-radio" />
    <label for="option2"><span class="">这是一行特别优雅的代码</span></label>       
&