简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > css教學 > 主體

純Css程式碼美化checkbox複選框、radios單選框和滑動按鈕簡單方法

小云云
發布： 2017-12-13 15:46:23
原創
2870 人瀏覽過

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

效果预览

純Css程式碼美化checkbox複選框、radios單選框和滑動按鈕簡單方法

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程式碼美化checkbox複選框、radios單選框和滑動按鈕簡單方法

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程式碼美化checkbox複選框、radios單選框和滑動按鈕簡單方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
css
來源：php.cn
上一篇：CSS實作相簿橫向完美排布方法 下一篇：詳解CSS如何製作中英文雙語菜單
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
提交後如何列印選定的複選框值 這是我的複選框清單和我需要提交資料的按鈕..<label>AccessLocations</label><br/><inputtype=&...
來自於 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-form-checkbox與b-table一起使用。嘗試檢索選定的模組ID。 <b-tableid="module-table":item...
來自於 2024-03-31 18:36:11
0
1
389
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！