Wie kann ich eine Schaltfläche in einem Optionsfeld anklickbar machen?

Question

Ich verstehe, dass ich klickbaren Text neben einem Radio einen Knopf machen kann, so dass das Klicken auf den Text den Radio-Button schaltet.

<label> 
    Click me 
    <input type="radio" value="selected"><br> 
</label> 

Ich möchte eine Schaltfläche wie mein Label haben, aber wenn ich dies tun das Optionsfeld nicht umgeschaltet wird, wenn ich auf die Schaltfläche klicken.

<label> 
    <button type="button">Click</button> 
    <input type="radio" value="selected"><br> 
</label> 

Wie kann die Tastenbeschriftung den Radiobutton schalten, wenn geklickt wird?

Ich möchte dies tun, wie ich einige Code, der Schaltflächen mit formatierten Bildern verwendet, und ich möchte es ändern, um Radiobuttons darunter zu verwenden und behalten Sie die vorhandenen Tasten.

Answer 1

Sie können CSS verwenden‘pointer-events Mausereignisse‚fallen durch‘die Taste und auf das Etikett zu machen:

button 
 
{ 
 
    pointer-events: none; 
 
}

<label for="target"> 
 
    <button type="button">Click</button> 
 
    <input id="target" type="radio" value="selected"><br> 
 
</label>

Beachten Sie, dass Sie auch festlegen haben das Attribut for des Labels, damit es richtig funktioniert, wenn es mehr als ein Eingabeelement enthält.

Beachten Sie auch, dass dies den Knopf völlig unzugänglich macht, so dass Event-Handler nicht mehr ausgelöst werden (aber es scheint, dass dies das ist, was Sie wollen).

Answer 2

Diese Frage ist ein Duplikat von this question.

Die answer schlug vor, ein Pseudo-Element zu verwenden, das die Mausereignisse für die Beschriftung auslöst.

label:after{ 
    position: absolute; 
    content: ""; 
    width: 100%; 
    height: 100%; 
    background: transparent; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
} 

JSFiddle von answer.