wake-up-neo.com

Button innerhalb eines Labels

Ich habe eine label mit "for="the pointer to the checkbox input"" und solange ich weiß, kann diese for nur für label hinzugefügt werden. Daher muss ich in label einen <button> hinzufügen (ich brauche ihn), aber das click-Ereignis funktioniert nicht ordnungsgemäß - das Kontrollkästchen, auf das for zeigt, ist nicht aktiviert. 

Welche Möglichkeiten kann ich hier nutzen, wenn ich <button> innerhalb der label, mit nur html + css kodieren muss?

code zum Beispiel:

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

Es stellt sich heraus, dass Sie einen <button> eine Eingabe vornehmen können, aber nur, wenn Sie den <label>in den <button> einfügen.

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

Dies widerspricht zwar den W3C-Spezifikationen:

Die Bezeichnung des interaktiven Elements darf nicht als Nachkomme des Schaltflächenelements erscheinen. https://www.w3.org/TR/html-markup/label.html

7
Sinetheta

Sie können ein transparentes Pseudoelement verwenden, das das Kontrollkästchen überdeckt, und die Schaltfläche selbst, die Mausereignisse abfängt.

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;
}
2
eboye

Die beste Lösung besteht darin, einen Button zu gestalten.

Wenn Sie ein CSS-Framework wie bootstrap verwenden, können Sie die Label-Klassen wie btn und btn-default angeben. Dies wird wie eine Schaltfläche gestaltet. Möglicherweise müssen Sie die css-Eigenschaft der Zeilenhöhe manuell wie folgt anpassen: 

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

Fügen Sie dann die Stile als Schaltfläche hinzu, und fügen Sie diese Stile hinzu:

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

Dadurch wird die überprüfte Eingabe übernommen und das nächste Beschriftungselement in der dom, für das die Klasse btn, die Schaltfläche "Bootstrap btn-default" angeklickt ist, wird angezeigt. Passen Sie die Farben an.

1
Kyle Goss

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 das Klickziel, currentTarget ist in diesem Fall das Label.

Ohne die if-Anweisung wird das Ereignis zweimal ausgelöst, wenn Sie außerhalb des Bereichs zum Verhindern von Ereignissen klicken.

Nicht browserübergreifend getestet.

0
Jaakko Karhu