input radio 自定义css样式

向右看齐 2022-05-15 00:22 274阅读 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 条评论，274人围观）

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

相关阅读

相关 css 自定义滚动条样式

总是记不住这几个修改滚动条的伪类，抄过来记录一下：你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式: ::-webkit-scrollbar

客官°小女子只卖身不卖艺/ 2023年07月20日 13:59/ 0 赞/ 23 阅读

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

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

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

相关 css 自定义样式继承写法

最近弄css，中间有些样式需要单独定义，但是又继承于其他的样式，弄过一次，没有记录，重新弄耽误了点时间，这里算是记录下吧方便以后的修改。当需要自定义样式的时候，但是又是

本是古典何须时尚/ 2022年06月05日 10:12/ 0 赞/ 255 阅读

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

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

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

相关 css自定义滚动条样式

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

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

相关 input radio 自定义css样式

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

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

相关 CSS自定义checkbox样式

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

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

相关自定义radio

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

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

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

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

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

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

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

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