Heim  >  Artikel  >  Web-Frontend  >  Reines CSS, um einen Box-Auswahleffekt zu erzielen

Reines CSS, um einen Box-Auswahleffekt zu erzielen

王林
王林nach vorne
2020-11-09 15:41:174929Durchsuche

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:

Reines CSS, um einen Box-Auswahleffekt zu erzielen

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!

Stellungnahme:
Dieser Artikel ist reproduziert unter:csdn.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen