Pure css to achieve box selection effect

Selector introduction:

1. " ": For example, div p selects all

elements immediately after the

element.

2. :checked: For example, input:checked indicates the checked status of radio buttons and check boxes.

(Learning video sharing: css video tutorial)

Implementation code:

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

Implementation effect:

This situation is mainly used for customizing the selection style of the input with type="checkbox, radio". It is often used in actual work. I hope it will be helpful to everyone.

Related recommendations: CSS tutorial

The above is the detailed content of Pure css to achieve box selection effect. For more information, please follow other related articles on the PHP Chinese website!