Knopf in einem Etikett

Question

Ich habe ein label mit „for="the pointer to the checkbox input"“ und so lange, wie ich weiß, kann dies for nur für label hinzugefügt werden. Daher muss ich innerhalb der label eine <button> hinzufügen (ich brauche es), aber das Click-Ereignis funktioniert nicht ordnungsgemäß - es überprüft nicht das Kontrollkästchen, das for zeigt auf.

Was sind die Möglichkeiten, die ich hier verwenden, wenn ich <button> innerhalb des label, mit nur html + CSS Codierung platzieren müssen?

einige Code zum Beispiel:

<input type="checkbox" id="thecheckbox" name="thecheckbox"> 
<div for="thecheckbox"><button type="button">Click Me</button></div> 

Answer 1

Sie transparent Pseudoelement verwenden können, die das Kontrollkästchen und die Schaltfläche selbst überlagert, die Mausereignisse fangen.

Hier ist ein Beispiel:

html:

<label> 
    <input type="checkbox"> 
    <button class="disable">button</button> 
</label> 

css:

.disable{pointer-events:fill} 
label{position:relative} 
label:after{ 
    position: absolute; 
    content: ""; 
    width: 100%; 
    height: 100%; 
    background: transparent; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
} 

Answer 2

i die Sie sollten die normale Art und Weise würde vorschlagen, verwenden Sie das Kontrollkästchen zu verwenden und die CSS-Stil verwenden Um es wie Button aussehen zu lassen, weil ich nicht glaube, dass Sie einen Knopf brauchen, versuchen Sie nur, das Aussehen des Knopfes zu bekommen und der Knopf ist da, um als Knopf zu verwenden, wäre es schlecht als HTML Validierung auch Sie sollten immer s verwenden Sie den Tag für den Zweck sie für

gemacht werden

Answer 3

Es stellt sich heraus Sie ein <button> einen Eingang betreiben machen können, aber nur, wenn Sie die die <button><label>innen setzen.

<button type="button"> 
 
    <label for="my-checkbox">Button go outside the label</label> 
 
</button> 
 
<input type="checkbox" id="my-checkbox">

Obwohl dies im Widerspruch zu den W3C-Spezifikationen:

Das interaktive Element Etikett darf nicht als Nachkomme des Knopfelementes erscheinen. https://www.w3.org/TR/html-markup/label.html

Answer 4

HTML:

<label for="whatev" 
     onclick="onClickHandler"> 
    <button>Imma button, I prevent things</button> 
</label> 

JS:

const onClickHandler = (e) => { 
    if(e.target!==e.currentTarget) e.currentTarget.click() 
} 

Ziel ist der Klick Ziel ist current das Etikett in diesem Fall.

Ohne die if-Anweisung wird das Ereignis zweimal ausgelöst, wenn außerhalb des ereignisverhindernden Bereichs geklickt wird.

Nicht über den Browser getestet.

Answer 5

Die beste Lösung ist zu stylen ist wie ein Knopf.

Wenn Sie ein CSS-Framework wie bootstrap verwenden, können Sie die Label-Klassen wie btn und btn-default angeben. Dies wird es wie ein Knopf stylen.Möglicherweise müssen Sie die CSS-Eigenschaft der line-height wie so manuell einstellen:

label.btn { 
    line-height: 1.75em; 
} 

Dann wird die auf Klick Stile als Schaltfläche, um zu bekommen, diese Stile hinzu:

input[type=radio]:checked ~ label.btn { 
    background-color: #e6e6e6; 
    border-color: #adadad; 
    color: #333; 
} 

Dies nehmen die Eingabe, die überprüft wird und geben Sie das nächste Label-Element in der Dom, die die Klasse Btn hat, Bootstrap Btn-Standard-Taste geklickt Stile. Passen Sie die Farben an.