Reines CSS, um einen Box-Auswahleffekt zu erzielen

Selector-Einführung:

1: Beispielsweise wählt div + p alle

-Elemente aus.

2. :checked: Eingabe:checked zeigt beispielsweise den aktivierten Status von Optionsfeldern und Kontrollkästchen an.

(Lernvideo-Sharing: CSS-Video-Tutorial)

Implementierungscode:

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

Implementierungseffekt:

Diese Situation wird hauptsächlich für benutzerdefinierte Eingabeauswahlstile vom Typ „Kontrollkästchen, Radio“ verwendet wird häufig in der tatsächlichen Arbeit verwendet und ich hoffe, dass es für alle hilfreich sein wird.

Verwandte Empfehlungen: CSS-Tutorial

Das obige ist der detaillierte Inhalt vonReines CSS, um einen Box-Auswahleffekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!