自定义复选框 - 通过单击标签停止复选框的功能

Question

我有一个复选框。看起来像这样。

它工作正常......除了你可以通过点击标签来检查框。这有问题有两个原因：

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笔中实际使用它。

Answer 1

.container {
    pointer-events: none;
}

.checkmark {
    pointer-events: auto;
}

.container a {
    pointer-events: auto;
}

Answer 2

首先，您可以将复选框拉入其自己的容器中，然后，如果您希望标签在语义上与该特定输入相关，则必须为其分配for属性，并指定相应的{{1 }}属性到输入字段。现在，你拥有两全其美。链接是可点击的，而标签的其余部分则选中复选框。

id

看起来你已经找到了自定义复选框UI部分，所以我会留给你。