bugfix> html > 投稿

チェックボックスがあります。こんな感じです。

ラベルをクリックしてチェックボックスをオンにできることを除き、正常に機能します。これには2つの理由で問題があります。

  1. 好きじゃない
  2. ユーザーが青いリンクをクリックできるようにする必要があります。今、ボックスをチェックするだけです

これが私の現在のHTMLです。

<label className="container">I have read and do accept <a href={props.link}>{props.topic}</a>
    <input type="checkbox" onChange={event => props.onChange(event)}/>
    <span className="checkmark"></span>
 </label>

ここに私のcssがあります。これは(大体)ここから来ました:https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_custom_checkbox

/* Hide the browser's default checkbox */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: -2px;
    left: 0;
    height: 21px;
    width: 21px;
    background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
    background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
    background-color: rgb(29, 29, 29);
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
    left: 8px;
    top: 4px;
    width: 4px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

何かご意見は?実際に、私が提供したW3Cペンでプレイできます。

回答 2 件
  • .container {
        pointer-events: none;
    }
    .checkmark {
        pointer-events: auto;
    }
    .container a {
        pointer-events: auto;
    }
    
    

  • 最初に、チェックボックスを独自のコンテナーにプルし、次にラベルをその特定の入力に意味的に関連付ける場合は、それに for を割り当てる必要があります  属性、および対応する id を割り当てる  入力フィールドの属性。今、あなたは両方の長所を持っています。リンクはクリック可能で、残りのラベルはチェックボックスをチェックします。

    <div class="checkbox-container">
      <input type="checkbox" id="checkbox">
      <span className="checkmark"></span>
    </div>
    <label class="container" for="checkbox">
      I have read and do accept the <a href="#">terms and conditions</a>
    </label>
    
    

    カスタムチェックボックスUIパーツを既に理解しているようですので、お任せします。

あなたの答え