我们都知道，input的单选框是一个小圆框，不能直接更改样式。但是我们在很多网页中看到的单选框样式可不仅限于默认的那个样式（看上去没啥新意，也比较丑）。那么，接下来我将介绍下如何实现该功能。

　　首先，让我们来看下单选框的实现：

　　在html中的input元素中，将其type属性值设置为radio，即为单选框，此时只需将要设置的单选选项的name属性设置成一致的，即可实现单选功能。

代码实现如下：

<input type="radio" name="gender" value="male">男

<input type="radio" name="gender" value="female">女

　　要实现单选框样式改变，只需以下几步：

1、首先给出input的type属性为radio，设置相同name。同时用label将相应字段关联上该input属性（当label的for属性值与input的id属性值相同时 ，即可关联。关联上之后，点击字段即可选中相应的单选框）。

html中：
　　　　　　　<div>

                <input type="radio" name="paixu" id="paixu1" checked>

                <label for="paixu1" style="cursor:pointer">按热门排序</label>

                <input type="radio" name="paixu" id="paixu2">

                <label for="paixu2" style="cursor:pointer">按时间排序</label>

                <input type="radio" name="paixu" id="paixu3">

                <label for="paixu3" style="cursor:pointer">按评价排序</label>

            </div>

2、设置input的display属性为none，将比较丑的那个框去掉。然后用伪元素添加相应的框。即在label中，用::before添加一个空心圆圈。

div>input{

    display: none;

}

div>label{

    position: relative;

    margin-right: 34px;

}

div>label::before{

    display: inline-block;

    content: "";

    width: 16px;

    height: 16px;

    border-radius: 50%;

    border: 1px solid rgb(219, 219, 219);

    margin-right: 6px;

    vertical-align: bottom;

}

3、在input单选框在选中的时候，原有before的单选框变为红色实心框，同时添加label::after为白色圆，并将其定位到before的红色实心框中间。从而达到重叠的效果，实现红色圆框+白色圆心的效果。

div>input:checked+label::before{

    background-color: rgb(239, 66, 56);

}

div>input:checked+label::after{

    display: inline-block;

    content: "";

    width: 6px;

    height: 6px;

    border-radius: 50%;

    position: absolute;

    left: 6px;

    bottom: 6px;

    background-color: white;

}

　　是不是挺简单的呢？通过这样的方法还可以设置很多样式呢。

完整代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

<style>

div>input{

    display: none;

}

div>label{

    position: relative;

    margin-right: 34px;

}

div>label::before{

    display: inline-block;

    content: "";

    width: 16px;

    height: 16px;

    border-radius: 50%;

    border: 1px solid rgb(219, 219, 219);

    margin-right: 6px;

    vertical-align: bottom;

}

div>input:checked+label::before{

    background-color: rgb(239, 66, 56);

}

div>input:checked+label::after{

    display: inline-block;

    content: "";

    width: 6px;

    height: 6px;

    border-radius: 50%;

    position: absolute;

    left: 6px;

    bottom: 6px;

    background-color: white;

}

</style>

</head>

<body>

            <div>

                <input type="radio" name="paixu" id="paixu1" checked>

                <label for="paixu1" style="cursor:pointer">按热门排序</label>

                <input type="radio" name="paixu" id="paixu2">

                <label for="paixu2" style="cursor:pointer">按时间排序</label>

                <input type="radio" name="paixu" id="paixu3">

                <label for="paixu3" style="cursor:pointer">按评价排序</label>

            </div>

</body>

</html>

　　

 

用css实现html中单选框样式改变的更多相关文章

  1. 复选框、单选框样式自定义（https://www.cnblogs.com/freedom-feng/p/11346396.html）

    复选框.单选框样式自定义(https://www.cnblogs.com/freedom-feng/p/11346396.html)复选框html内容如下:<input type="c ...

  2. vue+elementUI中单选框el-radio设置默认值和唯一标识某个单选框

    vue+elementUI中单选框el-radio设置默认值 如果后台返回的单选框的值是number:单选框的lable需要设置成 :lable='0';如下: <el-form-item la ...

  3. 单选框radio改变事件详解（用的jquery的radio的change事件）

    单选框radio改变事件详解(用的jquery的radio的change事件) 一.总结 1.用的jquery的radio的change事件:当元素的值发生改变时,会发生 change 事件,radi ...

  4. 纯css美化下拉框、复选框以及单选框样式并用jquery获取到其被选中的val

    具体样式如图所示: 注:获取val值时记得要先引入jquery库奥. 1.下拉框 css部分 #cargo_type_id{ font-size: 13px; border: solid 1px #b ...

  5. js自定义修改复选框单选框样式，清除复选框单选框默认样式

    之前做项目的时候,也遇到过需要按照设计稿把<input type="checkbox">和<input type="radio">的默认 ...

  6. form中 单选框 input[type="radio"] 分组

    在form中有时候需要给单选框分组,这种情况下 可以通过给单选框设置相同的name来进行分组: <html> <head> <title> </title&g ...

  7. WPF中单选框RadioButton

    单选框RadioButton的基本使用: <StackPanel Margin="10"> <Label FontWeight="Bold"& ...

  8. vue中单选框与多选框的实现与美化

    我们在做一些页面时,可能会用到很多的单选框和复选框,但是原生的radio和checkbox前面的原型图标或方框样式不尽人意.于是,决定自己来实现单选框和复选框.我用的是vue,所以就用vue的方式实现 ...

  9. vue.单选和多选，纯css自定义单选框样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. TP5之model

    使用model 查询数据,添加数据,修改数据,删除数据 聚合操作 获取器,修改器 自动添加时间戳(创建时间,修改时间) 软删除 1.使用model查询数据 $res = User::get(1); / ...

  2. 关于<?php exit;?>"的绕过问题

    在Moctf中看到一道题目: <?php show_source(__FILE__); $c="<?php exit;?>"; @$c.=$_POST['c']; ...

  3. bzoj 4589: Hard Nim【线性筛+FWT+快速幂】

    T了两次之后我突然意识到转成fwt形式之后,直接快速幂每次乘一下最后再逆回来即可,并不需要没此次都正反转化一次-- 就是根据nim的性质,先手必输是所有堆个数异或和为0,也就变成了一个裸的板子 #in ...

  4. Luogu P1736 创意吃鱼法【dp】By cellur925

    题目传送门 题意:给出一个01矩阵,找出一条对角线,使得对角线上的元素都为1,而对角线所在矩阵其他元素均为0,使得这样的对角线最长. 状态:$f[i][j]$表示以($i$,$j$)为对角线端点的最长 ...

  5. 状压dp小结 By cellur925

    会一直慢慢写的... 一.一些技巧(位运算) 取出整数n在二进制表示下的第k位,检验是否为1---(n>>k)&1 求最后完备状态(假设都是1),有n个待枚举状态,结果是(1< ...

  6. 跟我一起玩Win32开发（2）：完整的开发流程

    上一篇中我给各位说了一般人认为C++中较为难的东西——指针.其实对于C++,难点当然不局限在指针这玩意儿上,还有一些有趣的概念,如模板类.虚基类.纯虚函数等,这些都是概念性的东西,几乎每一本C++书上 ...

  7. Jmeter之Json Path Extractor 接受上一个请求的响应参数

    最近在使用Jmeter进行接口测试,被一个问题困扰了很久,就是第二个请求如何接收上一个请求响应中的参数,刚开始尝试着用网上普遍说的正则表达式,长了了N多次之,都没有达到我想要的效果,被整的够惨,于是, ...

  8. AtCoder Grand Contest 011 F - Train Service Planning

    题目传送门:https://agc011.contest.atcoder.jp/tasks/agc011_f 题目大意: 现有一条铁路,铁路分为\(1\sim n\)个区间和\(0\sim n\)个站 ...

  9. 1-8继承extends

    什么是继承? 继承是面向对象三大特征之一.java中的继承描述的是两个类之间的关系,被继承的类称为父类,继承的类称为子类,使用extends关键字来表示.在java语言里面只支持单继承,即一个类只能有 ...

  10. jQuery access()方法

    最开始只是想了解attr方法,发现它内部调用了jQuery.access()方法.除了attr,还有prop.text.html.css.data 都是内部调用了jQuery.access()方法,可 ...