input radio 自定义css样式

向右看齐 2022-05-15 00:22 291阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
        <title>Document</title>
    </head>
    <style>
       input[type="radio"] {
        width: 20px;
        height: 20px;
        opacity: 0;
    }
    input[type="radio"] + label::before {
        display: inline-block;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        margin-right: 10px;
        vertical-align: text-bottom;
        border: 1px solid #d9d9d9;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        content: "";
    }
    input[type="radio"]:checked +  label::before {
        background-color: white;
        background-clip: content-box;
        border-color: #79a0ff;
        border-width: 5px;
    }
    </style>
    <body>
        <div>
            <input class="doRadio doRadioFirst" id="carMatch" type="radio" name="attributes" value="汽配">
            <label for="carMatch">汽配</label>
            <input class="doRadio" type="radio" id="carRepair" name="attributes" value="汽修">
            <label for="carRepair">汽修</label>
            <input class="doRadio" type="radio" id="other" name="attributes" value="其他">
            <label for="other">其他</label>
        </div>
    </body>
    </html>

样式图片： IE8也不会乱

![70][]

[70]: /images/20220515/4c8ee26c5f914632b8016416096a4feb.png

发表评论取消回复

表情：

评论列表（有 0 条评论，291人围观）

还没有评论，来说两句吧...

相关阅读

相关 css自定义radio选择样式

/两个复选框box浮动，方便设置css/ .radio{ display:-moz-box; display:-webki

忘是亡心i/ 2023年06月22日 10:25/ 0 赞/ 14 阅读

相关自定义上传图片（自定义上传input样式）

1.Html文件 <!DOCTYPE html> <html lang="en"> <head> <meta chars

灰太狼/ 2022年12月20日 03:11/ 0 赞/ 175 阅读

相关自定义input type=”radio”样式

html： <input type="radio" name="sex" value="man" id="man" checked> <lab

待我称王封你为后i/ 2022年06月02日 00:38/ 0 赞/ 189 阅读

相关 css自定义滚动条样式

代码 css自定义滚动条样式，webkit内核浏览器。 / 滚动条样式 / ::-webkit-scrollbar { / 滚动条的宽度 / width

偏执的太偏执、/ 2022年05月25日 11:05/ 0 赞/ 315 阅读

相关 input radio 自定义css样式

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

向右看齐/ 2022年05月15日 00:22/ 0 赞/ 292 阅读

相关 CSS自定义checkbox样式

\[type=checkbox\]是过滤的意思，意思是说如果遇到type=checkbox的，就执行以下的样式。 input[type=checkbox],

小咪咪/ 2022年05月14日 04:55/ 0 赞/ 298 阅读

相关 input 纯CSS 自定义单选框/多选框样式

备忘，直接上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT

太过爱你忘了你带给我的痛/ 2022年05月10日 15:44/ 0 赞/ 532 阅读

相关自定义radio

做了一个简单的自定义radio的样式基于mui和jq ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cH

╰半夏微凉°/ 2022年03月30日 09:30/ 0 赞/ 215 阅读

相关改变input tpye 属性radio css 样式！！！

// html部分 <div class="Report_for_right"> <input type="radio" name="Report_

灰太狼/ 2022年01月10日 05:25/ 0 赞/ 300 阅读

相关自定义样式的radio单选按钮

//自定义单选radio HTML 代码： <label class="defined-label"> <input class="def

曾经终败给现在/ 2021年11月17日 02:00/ 0 赞/ 409 阅读