首頁 > web前端 > css教學 > 純css實作選框選取效果

純css實作選框選取效果

王林
發布: 2020-11-09 15:41:17
轉載
4955 人瀏覽過

純css實作選框選取效果

選擇器介紹:

1、「 」:如 div p    選擇緊接在

元素之後的所有

元素。

2、:checked :如 input:checked 單選方塊和複選框的選取狀態。

(學習影片分享:css影片教學

實作程式碼:

<style type="text/css">
            .che-box {
            display:inline;
        }
        .che-box input{
            display: none;
        }
        .che-box label{
            display: inline-block;
            border: 1px solid #e1e1e1;
            border-radius: 4px;
            padding: 3px 5px;
        }
        .che-box input:checked + label{
            border-color: #088de8;
            background: #088de8;
            color: #fff;
        }
    </style>
 
 
<div class="che-box">
        <input type="checkbox" id="che1" />
        <label for="che1">
            标签1
        </label>
    </div>
    <div class="che-box">
        <input type="checkbox" id="che2" />
        <label for="che2">
            标签2
        </label>
    </div>
登入後複製

實作效果:

純css實作選框選取效果

這情況主要用於type=「checkbox,radio」的input 自訂選取樣式的,在實際工作中經常會使用到,希望對大家有幫助。

相關推薦:CSS教學

以上是純css實作選框選取效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
css
來源:csdn.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板