Positionierung des Kontrollkästchens innerhalb des Labels ausgeblendet/während des Schwebens oder ausgewählt

Ich möchte das Kontrollkästchen nur anzeigen, wenn das entsprechende Label schwebt oder wenn es ausgewählt ist. Das ist einfach, aber ich habe Schwierigkeiten, den Text meines Labels so zu positionieren, dass er nicht nach rechts springt, wenn das Kontrollkästchen angezeigt wird.Positionierung des Kontrollkästchens innerhalb des Labels ausgeblendet/während des Schwebens oder ausgewählt

label input[type=checkbox] { 
 
    display: none; 
 
} 
 

 
label:hover input[type=checkbox], input[type=checkbox]:checked{ 
 
    display: inline; 
 
}

<label> 
 
    <input type="checkbox"> 
 
    text 
 
</label>

Quelle

2016-04-21 Sven

Soll die Beschriftung nicht verschoben werden und das Kontrollkästchen rechts angezeigt werden? links? die Beschriftung ausblenden und die Checkbox einblenden? –

@BenSewards Checkbox auf der linken Seite des Labels, Ein-/Ausblenden kann später hinzugefügt werden, aber nur für die Checkbox. – Sven

setzt die Kasse auf der rechten Seite eine Option? das wird es nur erscheinen lassen und deinen Text nicht berühren –

Vielleicht können Sie visibility Eigenschaft anstelle der Anzeige verwenden.

<!doctype html> 

<head> 
<style> 
    label input[type=checkbox] { 
     visibility: hidden; 
    } 

    label:hover input[type=checkbox], 
    input[type=checkbox]:checked { 
     visibility: visible; 
    } 
</style> 
</head> 

<body> 
    <label> 
     <input type="checkbox"> text 
</label>

Quelle

2016-04-21 13:32:17 balkhanguk

Danke, ganz vergessen zu dieser Immobilie .. – Sven

Einfache Lösung ist Ihr Text zuerst, dann Checkbox einzufügen. Fügen Sie CSS hinzu, um es zu verschönern.

<label> 
    text 
    <input type="checkbox"> 
</label>

Quelle

2016-04-21 13:25:58

Aber was, wenn er Checkbox zuerst setzen möchte? –

Dann aktualisieren Sie Ihre CSS, fügen Sie einige Marge vor dem Text. –

Label-Eingabe [Typ = Kontrollkästchen] { Anzeige: keine; Position: absolut; } label span { Rand links: 20px; } Bezeichnung: Hover-Eingabe [Typ = Kontrollkästchen], Eingabe [Typ = Kontrollkästchen]: überprüft { Anzeige: Inline; } Text –

Sie können die Sichtbarkeit Inplace der Anzeige verwenden wie nach unten:

<style> 
    label input[type=checkbox] { 
     visibility: hidden; 
    } 

    label:hover input[type=checkbox], input[type=checkbox]:checked { 
     visibility:visible; 
    } 
</style>

Quelle

2016-04-21 13:32:15

Schauen Sie sich diesen Code prüfen dies: Label input [type = Checkbox] { display: none; Position: absolut; } label span { Rand links: 20px; } Bezeichnung: Hover-Eingabe [Typ = Kontrollkästchen], Eingabe [Typ = Kontrollkästchen]: überprüft { Anzeige: Inline; }

Ihr Code: Text

label input[type=checkbox] { 
 
     display: none; 
 
     position:absolute; 
 
    } 
 
    label span { 
 
     margin-left: 20px; 
 
    } 
 
    label:hover input[type=checkbox], input[type=checkbox]:checked{ 
 
     display: inline; 
 
    }

<label> 
 
     <input type="checkbox"> 
 
     <span>text</span> 
 
    </label>

Quelle

2016-04-21 13:32:46

ich ein paar Optionen:

die Checkbox auf der rechten Seite des Textes machen, Auf diese Weise bewegt sich der Text nicht.
Verwendung Opazität statt Sichtbarkeit (Sichtbarkeit von einigen Browsern nicht unterstützt wird)
das Kontrollkästchen, um den Text nach rechts gleitet animieren (so die Breite eingestellt (oder max-width) der Checkbox 0 mit Überlauf versteckt, und dann aktualisieren, es mit einem Übergang)

Opazität: https://jsfiddle.net/ahmadabdul3/ghogvcsx/1/

animierte: https://jsfiddle.net/ahmadabdul3/ghogvcsx/

<label> 
    <span> 
    <input type="checkbox"> 
    </span> 
    text 
</label> 

label span { 
    display: inline-block; 
    max-width: 0; 
    overflow: hidden; 
    transition: max-width 0.3s linear; 
} 

label:hover span { 
    max-width: 30px; 
    transition: max-width 0.3s linear; 
}

Quelle

2016-04-21 13:36:27

Positionierung des Kontrollkästchens innerhalb des Labels ausgeblendet/während des Schwebens oder ausgewählt

Antwort

Verwandte Themen