我们都知道，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. 看鸟哥的Linux私房菜的一些命令自我总结（二）

    -关于执行文件路径的变量  $PATH -查看文件与目录  ls -a  :全部的文件,连同隐藏文件一起列出来 -d  :仅列出目录本身,而不是列出目录内的文件数据 -i   :列出inode号码 - ...

  2. android调用第三方库——第一篇 (转载)

    转自:http://blog.csdn.net/jiuyueguang/article/details/9447245 版权声明:本文为博主原创文章,未经博主允许不得转载. 0:前言: 这两天一直在研 ...

  3. ES6之箭头函数深入理解

    相对于普通函数的区别 新的书写方式 this 的改变 不能当构造函数 没有 prototype 属性 没有 arguments 对象 新的书写方式 书写方式很简单!直接看下图, 常规方式写一个函数 c ...

  4. 浅谈Floyd的三种用法 By cellur925

    Floyd大家可能第一时间想到的是他求多源最短路的n³算法.其实它还有另外两种算法的嘛qwq.写一发总结好了qwq. 一.多源最短路 放段代码跑,注意枚举顺序,用邻接矩阵存图.本质是一种动规. 复杂度 ...

  5. 远程报:这可能是由于credssp加密oracle修正

    此错误解决办法 1.Win+R 输入regedit打开注册表 找到对应的以下目录HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion ...

  6. Suricata的初始化脚本

    见官网 https://suricata.readthedocs.io/en/latest/initscripts.html

  7. C++ thread operator= 右值引用 vector foreach

    这是 thread 的construct定义: default (1) thread() noexcept; initialization (2) template <class Fn, cla ...

  8. php,json数据传输（无刷新）

    废话不说直接上关键代码: js代码: <script language="javascript"> $(".login").live('click' ...

  9. Ionic开发-如何在ion-content形成上下结构 上面固定下层可滚动

    在一个系统设计中,一般有些需要固定位置,便利操作.现在我要做一个上下两层,需要固定上方,下方拉刷新数据. 页面: <ion-content scroll="false"> ...

  10. poj2677 Tour

    题意: 双调欧几里得旅行商问题. 思路: dp.定义dp[i][j](i <= j)为从点j从右向左严格按照x坐标递减顺序走到点1,之后再从点1从左向右严格按照x坐标递增的顺序走到点i,并且在此 ...