ラベル内のボタン

Question

「for="the pointer to the checkbox input"」のlabelがあります。私が知る限り、forはlabelにのみ追加できます。したがって、labelの中に<button>（私が必要です）の内部を追加する必要がありますが、クリックイベントが正しく機能していません - forが指しているチェックボックスをチェックしません。

私だけのhtml + CSSコーディングとlabel内部<button>、を配置しなければならない場合、私はここに使用できる可能性は何ですか？

例えば、いくつかのコード：

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

Answer 1

あなたはマウスイベントをキャッチするチェックボックスとボタン自体にオーバーレイする透明擬似要素を使用することができます。

はここに例を示します

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

私はあなたがチェックボックスを使用する通常の方法を使用して、CSSスタイルを使用する必要がありますことをお勧めそれはボタンのように見えるように私はあなたがボタンとボタンの外観を取得しようとしているボタンを必要とは思わないボタンとして使用するためには、 sがそれはあなたが<button>内<label>を置く場合にのみ、あなたは<button>が入力を動作させることができ判明、しかし、彼らは

Answer 3

のために作られているために、タグを使用します。

これはW3Cの仕様に違反が

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

は：

インタラクティブ要素のラベルは、ボタン要素の子孫として現れてはなりません。 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() 
} 

ターゲットクリック対象である、は、currentTargetは、この場合にはラベルです。

ifステートメントがないと、イベントはイベント防止領域の外側でクリックされた場合、2回起動されます。

ブラウザでテストされていません。

Answer 5

最高の解決策は、ボタンのようなスタイルにすることです。

ブートストラップなどのCSSフレームワークを使用している場合は、btnやbtn-defaultなどのラベルクラスを指定できます。これはボタンのようなスタイルになります。あなたはそのように手動で行の高さのCSSプロパティを調整する必要があります。

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

その後、ボタンとしてクリックスタイルに取得するには、これらのスタイルを追加します。

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

これがかかりますその入力がチェックされ、クラスbtnを持つdom内の次のlabel要素を与え、btn-defaultボタンのクリックされたスタイルをブートストラップします。色を適切に調整します。