font-awesome 实现纯css 美化 radio checkbox 美化

最新推荐文章于 2023-06-13 16:36:37 发布

lianjiuxiao

最新推荐文章于 2023-06-13 16:36:37 发布

阅读量474

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/lianjiuxiao/article/details/88788262

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="css/font-awesome.css" rel="stylesheet">
    <style type="text/css">
    input[type=checkbox]+.lbl,
    input[type=radio]+.lbl {
        position: relative;
        display: inline-block;
        margin: 0;
        line-height: 20px;
        min-height: 18px;
        min-width: 18px;
        font-weight: normal;
        cursor: pointer;
    }
    input[type=checkbox]+.lbl::before,
    input[type=radio]+.lbl::before {
        cursor: pointer;
        font-family: fontAwesome;
        font-weight: normal;
        font-size: 12px;
        color: #FFF;
        content: "\a0";
        background-color: #FAFAFA;
        border: 1px solid #c8c8c8;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        border-radius: 0;
        display: inline-block;
        text-align: center;
        height: 16px;
        line-height: 14px;
        min-width: 16px;
        margin-right: 1px;
        position: relative;
        top: -1px;
    }
    input[type=checkbox],
    input[type=radio] {
        opacity: 0;
        position: absolute;
        z-index: 1;
        width: 18px;
        height: 18px;
        cursor: pointer;
    }
    input[type=checkbox]:checked+.lbl::before,
    input[type=radio]:checked+.lbl::before {
        display: inline-block;
        content: '\f00c';
        color: #32a3ce;
        background-color: #F5F8FC;
        border-color: #adb8c0;
    
    }

    </head>
    </style>

<body>
    <label>
        <input name="form-field-checkbox" type="checkbox">
        <span class="lbl"> choice 1</span>
    </label>
</body>
</html>

字体库可以到 http://fontawesome.dashgame.com/ 下载，使用csn有可能字体下载不下来