input为radio时，虽然会有默认选中的样式，但是并不符合大多数项目的需求，我们的目标是可以随心所欲自定义它的样式。怎么做呢？其实很简单，只要抓住3点。分别是1.label 2.隐藏自带样式 3.绘制我们的样式。

首先，我们准备了一个简单的选中样式，看图：

下面我们看看怎么实现

1.label

我们都知道，label可以和input关联，达到点击label就触发input的效果。

既然这样，我们就要充分的利用它。

<label for="cat" class="radio-box">

    <input type="radio" name="group" id="cat">

    <span class="radio-style">猫</span>

</label>

<label for="dog" class="radio-box">

    <input type="radio" name="group" id="dog">

    <span class="radio-style">狗</span>

</label>

看看这个简单的结构，label里面包了一个input和span,可以想象，我们的效果就是点击label触发input

我们看一下效果

2.隐藏自带样式

如何隐藏自带样式呢？方法很多，这里提供一种常用的写法

input[type="radio"] {

    opacity: 0;

    width: 0;

    height: 0;

}

这样我们就看不到input自带的丑陋选择框了,再看一下效果，oh,yeah！消失了。

3.绘制自己的样式

利用span标签绘制自己的样式

.radio-style::before {

    display: inline-block;

    width: 18px;

    height: 18px;

    border-radius: 50%;

    border: 1px solid #d9d9d9;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    content: "";

}

input[type="radio"]:checked + .radio-style::before {

    padding: 4px;

    background-color: blue;

    background-clip: content-box;

    border-color: blue;

}

我们利用伪元素，给它绘制一个圆圈，然后在选中状态的时候，在改变它的样式，从而达到第一张图的效果。

以下是所有代码的地址，欢迎查看

input-radio

当然以上是最简单自定义样式，我们还可以把它绘制成按钮的形式，甚至是用图片代替它。虽然这样更加繁琐，但是万变不离其宗，只要掌握上面3点，你就可以随心所欲修改它的样式啦。

input[type="radio"]自定义样式的更多相关文章

  1. 自定义input[type="radio"]的样式

    对于表单,input[type="radio"] 的样式总是不那么友好,在不同的浏览器中表现不一. 为了最大程度的显示出它们的差别,并且为了好看,首先定义了一些样式: <fo ...

  2. 自定义input[type="radio"]的样式（支持普通浏览器，IE8以上）

    对于表单,input[type="radio"] 的样式总是不那么友好,在不同的浏览器中表现不一. 对单选按钮自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :c ...

  3. HTML5中input[type='date']自定义样式

    HTML5提供了日历控件功能,缩减了开发时间,但有时它的样式确实不如人意,我们可以根据下面的代码自行修改. 建议:复制下面的代码段,单独建立一个css文件,方便我们修改. /* 修改日历控件类型 */ ...

  4. 自定义input[type="radio"]

    对于表单,input[type="radio"] 的样式总是不那么友好,在不同的浏览器中表现不一. 对单选按钮自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :c ...

  5. 纯css兼容个浏览器input[type='radio']不能自定义样式

    各个浏览器对于表单input[type='radio'].input[type='checkbox']的样式总是各有差异   //html <div class="remember-a ...

  6. 原生javascript自定义input[type=radio]效果

    2018年6月27日 更新 找到最为简单的仅仅使用css3的方案 <!DOCTYPE html> <html lang="en"> <head> ...

  7. 自定义input[type="file"]的样式

    input[type="file"]的样式在各个浏览器中的表现不尽相同: 1. chrome: 2. firefox: 3. opera: 4. ie: 5. edge: 另外,当 ...

  8. 如何更改 iOS 和安卓浏览器上的 input[type="radio"] 元素的默认样式？

    Safari 上的默认样式是这样的, 背景颜色可以使用background-color改变,但中间那个点始终无法去掉. 我查了一些jQuery插件,如iCheck.js,但是那说明写得我都看不明白,根 ...

  9. 定制 input[type="radio"] 和 input[type="checkbox"] 样式

    表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...

随机推荐

  1. python内置函数map/reduce/filter

    python有几个内置的函数很有意 思:map/filter/reduce,都是对一个集合进行处理,filter很容易理解用于过滤,map用于映射,reduce用于归并. 是python列表方法的三架 ...

  2. C#继承机制 多级继承

    一些面向对象语言允许一个类从多个基类中继承,而另一些面向对象语言只允许从一个类继承,但可以随意从几个接口或纯抽象类中继承. 只有C++支持多级继承,许多程序员对此褒贬不一.多级继承常会引起继承来的类之 ...

  3. 你所不知道的js的小知识点(1)

    1.js调试工具 debugger <div class="container"> <h3>debugger语句会产生一个断点,用于调试程序,并没有实际功能 ...

  4. 2- vue django restful framework 打造生鲜超市 -环境搭建

    使用Python3.6与Django2.0.2(Django-rest-framework)以及前端vue开发的前后端分离的商城网站 项目支持支付宝支付(暂不支持微信支付),支持手机短信验证码注册, ...

  5. IE console报错

    需要注意的是,使用console对象查看对象信息,在IE8浏览器下未打开开发人员工具(F12)的情况下 会报'console'未定义错误. 解决办法:1.打开开发人员调试工具(F12)        ...

  6. DevOps - 版本控制 - Gogs

    Gogs Gogs官网:https://gogs.io Gogs文档:https://gogs.io/docs Gogs配置文件手册:https://gogs.io/docs/advanced/con ...

  7. EventUtil处理js兼容性问题

    var EventUtil={ addHandler:function(element,type,handler){ //添加事件 if(element.addEventListener){ elem ...

  8. 千万不要错过这几道Python面试题，Python面试题No16

    第1题: python下多线程的限制以及多进程中传递参数的方式? python多线程有个全局解释器锁(global interpreter lock),简称GIL,这个GIL并不是python的特性, ...

  9. Xenia and Bit Operations CodeForces - 339D

    Xenia and Bit Operations CodeForces - 339D Xenia the beginner programmer has a sequence a, consistin ...

  10. Codeforces：68A-Irrational problem(暴力大法好)

    A- Irrational problem p Time Limit: 2000MS Memory Limit: 262144K 64bit IO Format: %I64d& %I64 De ...