web-dev-qa-db-ja.com

ラベル内のボタン

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

labelに<button>を配置する必要がある場合、ここで使用できる可能性は何ですか？html + cssのみコーディング？

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

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

<button>は入力を操作しますが、<label>inside<button>。

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

これはW3Cの仕様に違反していますが：

インタラクティブ要素のラベルは、ボタン要素の子孫として表示してはなりません。 https://www.w3.org/TR/html-markup/label.html

11
Sinetheta

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

以下に例を示します。

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

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

ブートストラップなどの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、bootstrap btn-defaultボタンがクリックされたスタイルを持つdom内の次のラベル要素を提供します。フィットするように色を調整します。

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

Targetはクリックターゲットであり、currentTargetはこの場合のラベルです。

Ifステートメントがない場合、イベント防止エリアの外側をクリックすると、イベントが2回発生します。

クロスブラウザはテストされていません。

1
Jaakko Karhu