我们都知道，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. html5盒子模型

    相关博客: Flex 布局教程:语法篇:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex 布局教程:实例篇:http://ww ...

  2. E20180404-hm

    reject vt. 拒绝; 排斥; 抛弃,扔掉; 吐出或呕吐; conditioner  n. 调节器,调节装置 fabric n. 织物; 布; 构造; (建筑物的) 结构(如墙.地面.屋顶):质 ...

  3. Codeforces 711B 【模拟】

    比赛的时候绝壁打麻烦了... 考虑的好麻烦...wa7...还要判断出来的是不是positive的... 好吧..认了.. #include<cstdio> #include <ma ...

  4. hdoj5835【水题】

    思路:不想说了..具体看代码... #include <iostream> #include <stdio.h> #include <string.h> #incl ...

  5. 洛谷P2219 [HAOI2007]修筑绿化带（单调队列）

    传送门 啧……明明以前做到过这种类型的题结果全忘了…… 这种矩阵的,一般都是先枚举行,然后对列进行一遍单调队列,搞出右下角在每一行中合法位置时的最小权值 再枚举列,对行做一遍单调队列,用之前搞出来的最 ...

  6. IT兄弟连 JavaWeb教程 Servlet API

    Java Servlet是运行在带有支持Java Servlet规范的解释器的web服务器上的Java类. Servlet可以使用javax.servlet和javax.servlet.http包创建 ...

  7. CIFAR10自定义网络实战

    目录 CIFAR10 MyDenseLayer CIFAR10 MyDenseLayer import os import tensorflow as tf from tensorflow.keras ...

  8. iOS 将WKWebView内的HTML打印为PDF

    使用的webview为WKWebView,核心部分代码(Swift 4): // 创建打印渲染 let printPageRenderer:PDFRender = PDFRender() // 获取渲 ...

  9. JS判断字符串长度（英文占1个字符，中文汉字占2个字符）

    //计算字符串长度(英文占1个字符,中文汉字占2个字符) 方法一: String.prototype.gblen = function() { var len = 0; for (var i=0; i ...

  10. CentOS 安装图形化界面方法

    登录系统,使用yum 安装 #yum groupinstall 'X Window System'  -y 安装GNOME桌面环境 #yum groupinstall  'GNOME Desktop ...