日常工作中经常会用到单选框radio，而原生样式不好看无法满足项目要求，模拟写一个又比较麻烦，所以写了一个改变原生样式的demo。

原生样式：

改变后的样式：

以下为demo代码：

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type="text/css">

        .input_radio li {

            display: inline-block;

            position: relative;

            list-style: none;

        }

        .input_radio input[type="radio"] {

            display: none;

        }

        .input_radio span {

            padding: 0 12px;

            display: inline-block;

            background: #F4F4F4;

            border: 1px solid #F4F4F4;

            border-radius: 4px;

            line-height: 28px;

            text-align: center;

            color: #2D333B;

            cursor: pointer;

        }

        .input_radio input:checked+span {

            background: rgba(93,142,216,0.16);

            border-color: #5D8ED8;

            color: #5D8ED8;

        }

    </style>

</head>

<body>

    <ul class="input_radio">

        <li>

            <label for="optionLable00">

                <input id="optionLable00" name="option0" type="radio" checked="checked">

                <span class="option-label">橙色</span>

            </label>

        </li>

        <li>

            <label for="optionLable01">

                <input id="optionLable01" name="option0" type="radio">

                <span class="option-label">红色</span>

            </label>

        </li>

    </ul>

</body>

</html>

　　

css修改原生radio样式的更多相关文章

  1. css修改placeholder的样式

    css修改placeholder的样式 input::-webkit-input-placeholder { /* WebKit browsers */ font-size:14px; color: ...

  2. sencha touch 扩展篇之使用sass自定义主题样式 （下）通过css修改官方组件样式以及自定义图标

    上一讲我们讲解了如何使用官方的api来修改主题样式,这讲我们继续讲解sass的样式修改, 编译官方自带的主题包  在生成的项目以及官方sdk的目录下,自带了一些主题sass包,我们也可以通过修改sas ...

  3. 利用CSS 修改input=radio的默认样式(改成选择框)

    html部分: <input id="item2" type="radio" name="item"> <label fo ...

  4. css修改滚动条默认样式

    之前因为公司项目需要,在网上找到的: 直接上代码了 html代码 <div class="inner"> <div class="innerbox&qu ...

  5. css修改select默认样式

    先来看看效果图: css: <style media="screen"> .select_demo, .select_list { width: 400px; heig ...

  6. css美化checkbox radio样式

    /*check,radio*/ input.check_txt[type='checkbox']{ display: none; } input.check_txt[type='checkbox'] ...

  7. css 修改默认滚动条样式

    来自:https://www.cnblogs.com/juqian/p/6273808.html 侵删 <div class="inner"> <div clas ...

  8. 【CSS】自定义checkbox样式

    修改原生checkbox样式. 效果 原理 1.利用CSS3属性 appearance. 该属性(强制)更改(改变)默认(原生)样式. Firefox 支持替代的 -moz-appearance 属性 ...

  9. 【前端】input radio多选事件获取所有选中的id，radio样式优化可修改

    $("#all_button").on('click', function() { obj = document.getElementsByClassName("inpu ...

随机推荐

  1. centos7.4卸载再安装mariadb服务无法启动问题

    今天yum安装MariaDB完成后,启动服务时一直报以下错误 Job for mariadb.service failed. See ‘systemctl status mariadb.service ...

  2. linux 看执行任务的一些邮件

    cat /var/spool/mail/root From root@hadoop01.localdomain Fri Apr 12 18:44:01 2019 Return-Path: <ro ...

  3. 2019/4/19 wen 线程2

  4. Ruby学习笔记之升级ruby的版本

    升级ruby版本,有时候安装ruby的版本过低,需要进行升级,例如安装在centos6.7安装fpm需要ruby版本在1.9以上. 0x00 主机环境如下 [root@test ~]# cat /et ...

  5. P3440 [POI2006]SZK-Schools（费用流）

    P3440 [POI2006]SZK-Schools 每所学校$i$开一个点,$link(S,i,1,0)$ 每个编号$j$开一个点,$link(i,T,1,0)$ 蓝后学校向编号连边,$link(i ...

  6. 原创《分享（Angular 和 Vue）按需加载的项目实践优化方案》

    针对前端优化的点有很多,例如:图片压缩,雪碧图,js/css/html 文件的压缩合并,  cdn缓存, 减少重定向, 按需加载 等等 最近有心想针对 ionic项目 和 vue项目,做一个比较大的优 ...

  7. The frequent used operation in Linux system

    The frequently used operation in Linux system    2017-04-08 12:48:09  1. mount the hard disk:  #: fd ...

  8. Git 与 GitHub 简介

    Git 与 GitHub 的来历 Linux 之父 Linus 在 1991 年创建开源的 Linux 操作系统之后,多年来依靠全世界广大热心志愿者的共同建设,经过长足发展,现已成为世界上最大的服务器 ...

  9. 详解Python的装饰器

    Python中的装饰器是你进入Python大门的一道坎,不管你跨不跨过去它都在那里. 为什么需要装饰器 我们假设你的程序实现了say_hello()和say_goodbye()两个函数. def sa ...

  10. redis 的简单使用

    Redis是什么:内存型数据库,内存取数据与db硬盘取数据.......速度没得比,啥 内存,我直接创建变量就OK了嘛,用redis 干嘛,抱歉我只会开车,无法解答. 为什么使用  :在一些高并发业务 ...