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

Reines CSS, um einen Box-Auswahleffekt zu erzielen

王林
Freigeben: 2020-11-09 15:41:17
nach vorne
4956 Leute haben es durchsucht

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
css
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage