我们都知道，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. emacs在org-mode时输出pdf时，只输出为链接

    这个找到问题了,写错格式了,输出pdf中要内嵌图像,格式要写成[[file:/home/xxx/yyy.jpg]],不能写成file:/home/xxx/yyy.jpg或者[[file:/home/x ...

  2. AndroidManifest.xml文件详解（uses-feature） （转载）

    转自:http://blog.csdn.net/think_soft/article/details/7596796 语法(SYNTAX): <uses-featureandroid:name= ...

  3. Java中JRE、JDK和JVM的区别

    一.三者的基本概念: JRE(Java Development Kit):Java的运行环境: JDK(Java Runtime Enviroment):Java开发工具包: JVM(Java Vir ...

  4. Fzu Problem 1901 Period II (kmp)

    题目链接: Problem 1901 Period II 题目描述: 给出一个串,满足长度为p的前缀和长度为p的后缀相等的p的个数,输出p的个数,和p分别是多少? 解题思路: 对kmp的next数组的 ...

  5. Hdu 4513 吉哥系列故事——完美队形II (manacher变形)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4513 题目描述: 打完题目描述了,点开题目,发现题目是中文,orz.jpg.果断又删掉了,习惯真可怕 ...

  6. 真tm无聊，这几天。。。

    临近期末了,每天都要和学霸一起上自习. 很不喜欢学习和自己未来没多大用的东西 老师画的那些重点是对我们好吗~ 每天感觉都在折磨自己,不想学,学不进去,心里很烦躁,浮躁. 人生苦短->_-> ...

  7. 【学习笔记】深入理解js原型和闭包（8）——简述【执行上下文】上

    什么是“执行上下文”(也叫做“执行上下文环境”)?暂且不下定义,先看一段代码: 第一句报错,a未定义,很正常.第二句.第三句输出都是undefined,说明浏览器在执行console.log(a)时, ...

  8. Android iconfont字体图标的使用

    1.首先,进入阿里的矢量图标库,在这个图标库里面可以找到很多图片资源,当然了需要登录才能下载或者使用,用GitHub账号或者新浪微博账号登录都可以 2.登录以后,可以搜索自己需要的资源,然后直接下载使 ...

  9. iOS 网络开发

    http://www.cnblogs.com/kenshincui/p/4042190.html

  10. java 之 插入排序

    思想:将一个数组分成两组,左边那组始终有序,每次取右边那组插入到左边适当的位置,保证左边有序,当右边没有需要插入的数据的时候,整个数组是有序的.插入排序是稳定排序. 注:此图引用自https://ww ...