我们都知道，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. 洛谷 - P2762 - 太空飞行计划问题 - 最小割

    https://www.luogu.org/problemnew/solution/P2762 最小割对应的点,在最后一次更新中dinic的bfs会把他的dep重置掉.所以可以根据这个性质复原最小割. ...

  2. 51nod1432【贪心】

    对于每个数我找一个和他相加最接近独木舟,然后ans+=1; 想复杂了,直接两端来就好了. 然后两个相加如果<=m那么就让它们在一起,不是的话就让大的一艘船,然后继续搞(贪心) #include ...

  3. 求一元二次方程的根【double型的0输出%.2lf为-0.00】

    #include <bits/stdc++.h> using namespace std; #define LL long long #define eps 1e-6 int main() ...

  4. bzoj 3232: 圈地游戏【分数规划+最小割】

    数组开小导致TTTTTLE-- 是分数规划,设sm为所有格子价值和,二分出mid之后,用最小割来判断,也就是判断sm-dinic()>=0 这个最小割比较像最大权闭合子图,建图是s像所有点连流量 ...

  5. Windows系统下安装fis3

    在讲怎么安装FIS3之前我们先来了解一下FIS3 FIS3 是什么? FIS3 是面向前端的工程构建工具.解决前端工程中性能优化.资源加载(异步.同步.按需.预加载.依赖管理.合并.内嵌).模块化开发 ...

  6. PJzhang:lijiejie的敏感目录爆破工具BBScan

    猫宁!!! 参考链接: https://www.freebuf.com/sectool/85729.html https://segmentfault.com/a/1190000014539449 这 ...

  7. Gist使用经验

    注:本文只是分享Gist使用经验,不讨论类似软件或服务的优劣,对于技术或软件不要有傲慢与偏见 一.Gist是什么 关于Gist的详细介绍,请阅读官方文档About gists,下面只简略介绍我所用到的 ...

  8. pip 安装出现提示

    The directory '/home/zdj/.cache/pip/http' or its parent directory is not owned by the current user a ...

  9. wordpress数据库结构及表说明

    数据表结构: wp_commentmeta:存储评论的元数据wp_comments:存储评论wp_links:存储友情链接(Blogroll)wp_options:存储WordPress系统选项和插件 ...

  10. tsconfig.json No inputs were found in config file

    Build:No inputs were found in config file '/tsconfig.json'. Specified 'include' paths were '["* ...