简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
ホームページ
記事
に質問
コース
特集
ダウンロード
ゲーム
辞書
最近の更新

ホームページ  >  記事  >  ウェブフロントエンド  >  純粋な CSS コードでチェックボックス、ラジオボタン、スライドボタンを美しくする簡単な方法

純粋な CSS コードでチェックボックス、ラジオボタン、スライドボタンを美しくする簡単な方法

小云云
小云云オリジナル
2017-12-13 15:46:232881ブラウズ

我们知道css可以美化前端页面，本文我们就和大家分享纯Css代码美化checkbox复选框、radios单选框和滑动按钮的简单方法，希望能帮助到大家。

效果预览

純粋な CSS コードでチェックボックス、ラジオボタン、スライドボタンを美しくする簡単な方法

1. 复选框

<html>

<head>
    <style type="text/css">
        .switch {
            margin: 20px 20px 0 0;
            display: flex;
            align-items: center;
            width: auto;
        }
        .checkbox-input {
            display: none
        }
        .checkbox {
            -webkit-transition: background-color 0.3s;
            transition: background-color 0.3s;
            background-color: #fff;
            border: 1px solid #d7d7d7;
            border-radius: 3px;
            width: 16px;
            height: 16px;
            vertical-align:middle;
            margin: 0 5px;
        }
        .checkbox-input:checked+.checkbox {
            background-color: #57ad68;
        }
        .checkbox-input:checked+.checkbox:after {
            content: "\2714";
            display: inline-block;
            height: 100%;
            width: 100%;
            color: #fff;
            text-align: center;
            line-height: 16px;
            font-size: 12px;
            box-shadow: 0 0 4px #57ad68;
        }
    </style>
</head>

<body>
    <label class="switch">
        <input class="checkbox-input" id="checkbox" type="checkbox" name="demo-checkbox1">
        <label class="checkbox" for="checkbox"></label>
        <span>Hello</span>
    </label>
</body>

</html>

2. 单选框

<html>

<head>
    <style type="text/css">
        .switch {
            display: flex;
            align-items: center;
            width: auto;
            float: left;
        }
        .radio-beauty-container .radio-beauty {
            width: 16px;
            height: 16px;
            box-sizing: border-box;
            display: inline-block;
            border: 1px solid #d7d7d7;
            margin: 0 5px;
            border-radius: 50%;
            transition: 0.2s;
        }
        .radio-beauty-container input[type="radio"]:checked+.radio-beauty {
            border: solid 1px green;
            padding: 3px;
            background-color: green;
            background-clip: content-box;
            box-shadow: inset 0 0 1px rgba(0,128,0, 0.2), 0 0 3px green;
        }
    </style>
</head>

<body>
    <p class="radio-beauty-container">
        <label class="switch">
            <span class="radio-name">radio2</span>
            <input type="radio" name="radioName" id="radioName2" hidden/>
            <label for="radioName2" class="radio-beauty"></label>
        </label>
        <label class="switch">
            <span class="radio-name">radio3</span>
            <input type="radio" name="radioName" id="radioName3" hidden/>
            <label for="radioName3" class="radio-beauty"></label>
        </label>
    </p>
</body>

</html>

3. 滑动按钮

<html>

<head>
    <style type="text/css">
        .switch-slide-label {
            display: block;
            width: 34px;
            height: 18px;
            background: #ccc;
            border-radius: 30px;
            cursor: pointer;
            position: relative;
            -webkit-transition: 0.3s ease;
            transition: 0.3s ease;
        }
        
        .switch-slide-label:after {
            content: '';
            display: block;
            width: 16px;
            height: 16px;
            border-radius: 100%;
            background: #fff;
            box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
            position: absolute;
            left: 1px;
            top: 1px;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-transition:0.3s ease;
            transition:0.3s ease;
        }
        
        .switch-slide input:checked+label {
            background: #34bf49;
            transition: 0.3s ease;
        }
        .switch-slide input:checked+label:after {
            left: 17px;
        }

    </style>
</head>

<body>
    <p class="radio-beauty-container">
            <label class="switch-slide">
                <input type="checkbox" id="menu-right" hidden>
                <label for="menu-right" class="switch-slide-label"></label>
            </label>
    </p>
</body>

</html>

                                               

最简洁的代码美化复选框、单选框和滑动按钮

效果预览

純粋な CSS コードでチェックボックス、ラジオボタン、スライドボタンを美しくする簡単な方法

1. 复选框

<html>

<head>
    <style type="text/css">
        .switch {
            margin: 20px 20px 0 0;
            display: flex;
            align-items: center;
            width: auto;
        }
        .checkbox-input {
            display: none
        }
        .checkbox {
            -webkit-transition: background-color 0.3s;
            transition: background-color 0.3s;
            background-color: #fff;
            border: 1px solid #d7d7d7;
            border-radius: 3px;
            width: 16px;
            height: 16px;
            vertical-align:middle;
            margin: 0 5px;
        }
        .checkbox-input:checked+.checkbox {
            background-color: #57ad68;
        }
        .checkbox-input:checked+.checkbox:after {
            content: "\2714";
            display: inline-block;
            height: 100%;
            width: 100%;
            color: #fff;
            text-align: center;
            line-height: 16px;
            font-size: 12px;
            box-shadow: 0 0 4px #57ad68;
        }
    </style>
</head>

<body>
    <label class="switch">
        <input class="checkbox-input" id="checkbox" type="checkbox" name="demo-checkbox1">
        <label class="checkbox" for="checkbox"></label>
        <span>Hello</span>
    </label>
</body>

</html>

2. 单选框

<html>

<head>
    <style type="text/css">
        .switch {
            display: flex;
            align-items: center;
            width: auto;
            float: left;
        }
        .radio-beauty-container .radio-beauty {
            width: 16px;
            height: 16px;
            box-sizing: border-box;
            display: inline-block;
            border: 1px solid #d7d7d7;
            margin: 0 5px;
            border-radius: 50%;
            transition: 0.2s;
        }
        .radio-beauty-container input[type="radio"]:checked+.radio-beauty {
            border: solid 1px green;
            padding: 3px;
            background-color: green;
            background-clip: content-box;
            box-shadow: inset 0 0 1px rgba(0,128,0, 0.2), 0 0 3px green;
        }
    </style>
</head>

<body>
    <p class="radio-beauty-container">
        <label class="switch">
            <span class="radio-name">radio2</span>
            <input type="radio" name="radioName" id="radioName2" hidden/>
            <label for="radioName2" class="radio-beauty"></label>
        </label>
        <label class="switch">
            <span class="radio-name">radio3</span>
            <input type="radio" name="radioName" id="radioName3" hidden/>
            <label for="radioName3" class="radio-beauty"></label>
        </label>
    </p>
</body>

</html>

3. 滑动按钮

<html>

<head>
    <style type="text/css">
        .switch-slide-label {
            display: block;
            width: 34px;
            height: 18px;
            background: #ccc;
            border-radius: 30px;
            cursor: pointer;
            position: relative;
            -webkit-transition: 0.3s ease;
            transition: 0.3s ease;
        }
        
        .switch-slide-label:after {
            content: '';
            display: block;
            width: 16px;
            height: 16px;
            border-radius: 100%;
            background: #fff;
            box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
            position: absolute;
            left: 1px;
            top: 1px;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-transition:0.3s ease;
            transition:0.3s ease;
        }
        
        .switch-slide input:checked+label {
            background: #34bf49;
            transition: 0.3s ease;
        }
        .switch-slide input:checked+label:after {
            left: 17px;
        }

    </style>
</head>

<body>
    <p class="radio-beauty-container">
            <label class="switch-slide">
                <input type="checkbox" id="menu-right" hidden>
                <label for="menu-right" class="switch-slide-label"></label>
            </label>
    </p>
</body>

</html>

   相关推荐：

HTML页面中的的美化checkbox_html/css_WEB-ITnose

使用jquery与图片美化checkbox和radio控件的代码(打包下载)_jquery

有关radio、checkbox的课程推荐10篇

以上が純粋な CSS コードでチェックボックス、ラジオボタン、スライドボタンを美しくする簡単な方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：フォトアルバムの完璧な横配置を実現するCSSメソッド次の記事：フォトアルバムの完璧な横配置を実現するCSSメソッド

関連記事

続きを見る