日常工作中经常会用到单选框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. Fizz Buzz 面试题

    在CSDN上看到一篇文章<软件工程师如何笑着活下去>,本来是想看对这个行业的一些评价和信息,不曾检索到关于Fizz Buzz的面试题,上网搜了一下,顿感兴趣.留下此文,以表回忆. java ...

  2. React Native之常用组件（View）

    一. JSX和组件的概念 React的核心机制之一就是虚拟DOM:可以在内存中创建的虚拟DOM元素.React利用虚拟DOM来减少对实际DOM的操作从而提升性能.传统的创建方式是: 但这样的代码可读性 ...

  3. source insight 4.0.86.0 安装过程中出现的问题

    1.sourceinsight_4.0.86.0-setup.exe 2.sourceinsight4.exe覆盖安装目录中的sourceinsight4.exe 3.导入lic文件 过程中360会将 ...

  4. Linux下使用acme.sh 配置https 免费证书

    acme.sh 简单来说acme.sh 实现了 acme 协议, 可以从 let‘s encrypt 生成免费的证书.acme.sh 有以下特点:一个纯粹用Shell(Unix shell)语言编写的 ...

  5. postgres跨平台开发坑之空值

    ngx_lua架构下查询linux版postgres时,如果目标字段的值返回空,则返回结果为 ngx.null,同样的代码如果查询windows版postgres时,如果目标字段的值返回空,则返回结果 ...

  6. 7步快速解决SQLServer数据库（2008版）重装问题

    最近遇到了鼠标双击启动不了数据库的问题,根据事件管理器和自己的最近的使用情况初步判断估计是自己在用360误伤了数据库(哭) 没有办法只好重新安装一下了,参考了网上的一些大神们的教程然后自己实战操作一下 ...

  7. Centos7 Docker 安装笔记

    1. docker官方文档地址:https://docs.docker.com/ 2. centos版本号查看命令:uname -a    centos7.3版本 3. 直接yum -install ...

  8. 如何使用mongodb(建立原型,连接数据库)

    前两天看了一个朋友做的mongodb数据库,他是自己从某网络大学试听课学的,从可读性和模块区分方面做的比较差,所以写下此文,以作交流. 首先是创建一个modules文件夹,这里面用来存放mongodb ...

  9. Python三大神器：装饰器，迭代器，生成器

    一.装饰器 由于一个函数能实现一种功能,现在想要在不改变其代码的情况下,让这个函数进化一下,即能保持原来的功能,还能有新的"技能",怎么办? 现已经存在一个自定义的函数func1, ...

  10. 举例理解JDK动态代理

    JDK动态代理 说到java自带的动态代理api,肯定离不开反射.JDK的Proxy类实现动态代理最核心的方法: public static Object newProxyInstance(Class ...