純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>

實作效果：

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

相關推薦：CSS教學

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