Schaltfläche innerhalb eines Etiketts

Question 1

Ich habe ein label mit “for="the pointer to the checkbox input"„Und solange ich weiß, das for kann nur für hinzugefügt werden label. Daher muss ich innerhalb von hinzufügen label a <button>(Ich brauche es), aber das Klickereignis funktioniert nicht richtig – es aktiviert das Kontrollkästchen nicht for zeigt auf.

Was sind die Möglichkeiten, die ich hier verwenden kann, wenn ich platzieren muss <button> innerhalb der label, nur mit html+css codieren?

etwas Code zum Beispiel:

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

Question 2

Es stellt sich heraus, dass Sie eine machen können <button> einen Eingang bedienen, aber nur wenn Sie den setzen <label> Innerhalb das <button>.

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

Obwohl dies gegen die W3C-Spezifikationen verstößt:

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

Question 3

Sie können dies tun:

<label>
 <button></button>
</label>

CSS

label {
    cursor: pointer; // not necessary but probably a good idea.
    display: block; // depending on your structure.
}
button {
    pointer-events: none;
}

Das display: block on label ist nur erforderlich, damit der Begrenzungsrahmen des Labels seine untergeordneten Elemente (in diesem Fall die Schaltfläche) vollständig einschließt.

Question 4

Sie können ein transparentes Pseudoelement verwenden, das das Kontrollkästchen und die Schaltfläche selbst überlagert, 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;
}

Question 5

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()
}

Target ist das Klickziel, currentTarget ist in diesem Fall das Label.

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

Nicht browserübergreifend getestet.

Question 6

Die beste Lösung ist, Stil ist wie ein Knopf.

Wenn Sie ein CSS-Framework wie Bootstrap verwenden, können Sie den Label-Klassen wie btn und btn-default zuweisen. Dadurch wird es wie ein Knopf gestaltet. Möglicherweise müssen Sie die CSS-Eigenschaft der Zeilenhöhe manuell wie folgt anpassen:

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

Um dann die On-Click-Stile als Schaltfläche zu erhalten, fügen Sie diese Stile hinzu:

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

Dies nimmt die überprüfte Eingabe und gibt das nächste Label-Element im Dom aus, das die Stile der Klasse btn, bootstrap btn-default button clicked hat. Passen Sie die Farben an, wie es passt.

Question 7

Was ich gemacht habe ist folgendes:

<label htmlFor="fileUpload">
  <button onclick="onButtonClick">upload</button>
</label>
<input id="fileUpload" type="file" style="display: none"/>

onButtonClick() {
  document.getElementById('fileUpload').click();
}