コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > 純粋な CSS コードでチェックボックス、ラジオボタン、スライドボタンを美しくする簡単な方法

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

小云云
リリース： 2017-12-13 15:46:23
オリジナル
2909 人が閲覧しました

我们知道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 サイトの他の関連記事を参照してください。

関連ラベル：
css
ソース：php.cn
前の記事：フォトアルバムの完璧な横配置を実現するCSSメソッド 次の記事：CSSで中国語と英語の二か国語メニューを作成する方法を詳しく解説
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
送信後に選択したチェックボックスの値を印刷する方法 これは、データを送信するために必要なチェックボックスとボタンのリストです。<label>AccessLocations</label><br/>...
から 2024-04-06 13:07:43
0
2
337
継続クラスに CSS スタイルを適用する方法 .checked クラスが存在する場合、text-decoration:line-through; スタイルを .todo-name に挿入する必要があります (CSS で実行でき...
から 2024-04-02 22:44:36
0
1
319
Bootstrap Vue チェックボックス <b-table> <b-form-checkbox> b-table で b-form-checkbox を使用しようとしています。選択したモジュール ID を取得してみます。 <b-tableid="module-t...
から 2024-03-31 18:36:11
0
1
389
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート