日常工作中经常会用到单选框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. ARMLCD屏调试2--ili9325驱动编写

    2011-06-24 21:57:09 一,读id--完成 二,自己写了驱动--完成 三,调试LCD屏驱动--完成 一         读id,不过过程还有点曲折. 因为之前写命令写数据的时序是根据i ...

  2. html禁止页面滚动

    <div @touchmove.prevent></div> @touchmove.prevent   //加到标签上禁止滚动

  3. GHSpro文件上传

    GHSpro文件上传 文章 GHSpro 文件上传 基本设计图 上传 上传方式的选择 采用iframe 的表单上传 ajaxfileupload <div id="step-2&quo ...

  4. Oracle索引之Btree索引

    索引介绍 日常开发中,对于数据的查询如果需要优化,常听说要加个索引.但是为什么加了索引,数据的查询就快了呢?那是不是加了索引就一定会是有效或者有利的呢? Oracle中常见有BTREE索引,位图索引和 ...

  5. criteo marketing api 相关

    官网登陆地址:https://marketing.criteo.com/ 官网api介绍:https://marketing.criteo.com/e/s/article?article=360001 ...

  6. 使用NVM管理Node - Windows

    安装 NVM NVM 下载:https://github.com/coreybutler/nvm-windows 安装 Node 注意:如果没有FQ默认源可能安装npm失败,请参考下一节“安装 NPM ...

  7. 基于create-react-app的打包后文件路径问题

    改绝对路径为相对路径. https://segmentfault.com/q/1010000009672497直接在package.json里加 "homepage":" ...

  8. 使用ODP.NET连接Oracle数据库

    项目需要和第三方进行对接,奇葩的是地方没给提供接口,却提供了一个Oracle的视图 所以有了C#访问Oracle数据库的需求 1.打开nuget,安装驱动 https://www.nuget.org/ ...

  9. windows系统如何查看端口被占用、杀进程

    1.首先启动windows的命令窗口 2.进入windows命令窗口之后,输入netstat -ano,就可以看到系统当前所有的端口使用情况 3.通过命令查找某一特定端口,在命令窗口中输入命令中输入n ...

  10. 用《捕鱼达人》去理解C#中的多线程

    线程是进程中某个单一顺序的控制流,是程序运行中的调度单位,是程序执行流的最小单位,一个标准的线程由线程ID,当前指令指针(PC),寄存器集合和堆栈组成. 线程自己不拥有系统资源,只拥有一点儿在运行中必 ...