1. html代码

    <h2>你最喜欢的水果</h2>
    <div class="input-radio">
    <!-- 选中状态添加 checked 属性 -->
    <input id="apple" type="radio" name="fruits" checked />
    <label for="apple">苹果</label>
    </div>
    <div class="input-radio">
    <input id="banana" type="radio" name="fruits" />
    <label for="banana">香蕉</label>
    </div>
    <div class="input-radio">
    <input id="orange" type="radio" name="fruits" />
    <label for="orange">橙子</label>
    </div>
    <div class="input-radio">
    <input id="strawberry" type="radio" name="fruits" />
    <label for="strawberry">草莓</label>
    </div>

2.css代码

        .input-radio {
margin: 1em 0;
display:inline-block;
}
.input-radio input[type="radio"] {
opacity:;
}
.input-radio input[type="radio"] + label{
position: relative;
cursor: pointer;
}
.input-radio input[type="radio"] + label::before{
content: '';
position: absolute;
left: -24px;
border-radius: 50%;
width: 18px;
height: 18px;
border: 1px solid #999;
}
.input-radio input[type="radio"] + label::after{
content: '';
position: absolute;
left: -20px;
top: 4px;
border-radius: 50%;
width: 12px;
height: 12px;
}
.input-radio input[type="radio"]:checked + label::before{
border: 1px solid #24B7E5;
box-shadow: 0 0 6px #24B7E5;
transition: all .3s;
}
.input-radio input[type="radio"]:checked + label::after{
background:#24B7E5;
transition: all .5s;
}

3.效果

纯css实现单选框样式的更多相关文章

  1. vue.单选和多选,纯css自定义单选框样式

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

  2. 用css实现html中单选框样式改变

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

  3. 复选框、单选框样式自定义(https://www.cnblogs.com/freedom-feng/p/11346396.html)

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

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

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

  5. 纯css美化单选、复选框

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

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

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

  7. 使用checkbox实现纯CSS下拉框

    在这个例子中,我们会看到一个纯CSS制作的下拉框.主要是要用到了HTML元素的checkbox 和CSS3选择器,并没有用到JavaScript.例子如下: Click to Expand Link ...

  8. 纯css修改单选、复选按钮样式

    只支持IE9及以上 html <label><input class="radio" type="radio" name="radi ...

  9. css 单选框 样式 填充自定义背景 after

    input[type='radio'] //width 16px //height 16px display none //input[type='radio']:chcked // backgoun ...

随机推荐

  1. Codeforces 884f F. Anti-Palindromize

    题  OvO http://codeforces.com/contest/884/problem/F (Educational Codeforces Round 31 - F) 884f 解 题目标签 ...

  2. 【Java Web】简易商品信息管理系统——首个Web项目

    正文之前 在学习了一段时间的Java Web的内容之后,当然需要有个项目来练练手,我相信大多数人的首选项目都是信息管理系统吧,所以我选择了商品信息管理系统 目前项目源码已全部上传至GitHub,欢迎大 ...

  3. [Centos7]Centos7安装

    Centos7安装 安装wget yum -y install wget 更换镜像源 # 备份本地yum源 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum. ...

  4. Confluence 6.15 锚点(Anchor)宏

    允许你链接到页面的特定部分.有关如何使用锚点的内容,请参考页面 Anchors 页面中的详细内容. Wiki 标记(markup) 示例 宏名称: anchor 宏内容:None. {anchor:h ...

  5. android自定义键盘(解决弹出提示的字体颜色问题)

    最近准备要做一个项目,需要用到自定义小键盘来确保安全,而且还需要精确获得用户点击键盘时的落点位置.力度.指尖接触屏幕的面积等参数. 在写自定义键盘的时候,用到了国内网上的一些代码,出处是 向先人致敬! ...

  6. JavaWeb-SpringSecurity初认识

    Spring Security 安全 百度百科 功能:Spring Security对Web安全性的支持大量地依赖于Servlet过滤器.这些过滤器拦截进入请求,并且在应用程序处理该请求之前进行某些安 ...

  7. Hive使用与安装步骤

    1.Hive安装与配置 Hive官网:https://hive.apache.org/ 1. 安装文件下载 从Apache官网下载安装文件 http://mirror.bit.edu.cn/apach ...

  8. java web过滤器防止未登录进入界面

    import java.io.IOException; import javax.servlet.Filter; import javax.servlet.FilterChain; import ja ...

  9. C++入门经典-例7.3-析构函数的调用

    1:析构函数的名称标识符就是在类名标识符前面加“~”.例如: ~CPerson(); 2:实例代码: (1)title.h #include <string>//title是一个类,此为构 ...

  10. 【软件工程】Alpha冲刺(2/6)

    链接部分 队名:女生都队 组长博客: 博客链接 作业博客:博客链接 小组内容 恩泽(组长) 过去两天完成了哪些任务 描述 了解了如何根据系统获取的实际情况进行后端任务的调整 网易云音乐推荐算法的分析 ...