html - 复选框中不需要的点

Question

由于我的 CSS 样式，我的复选框中出现了一个不需要的点。我不确定如何删除它或导致它的原因。

这是它所在站点的链接: JavaJam Coffee House

Newsletter 标题下方的表格是网站中与该问题相关的唯一部分。请注意复选框左上角的小点。

非常感谢有关此问题的任何提示或见解。

与问题相关的 HTML 代码:

<input type=checkbox name="coupon" id="coupon">
<label for="coupon" class="check"><span>Include coupons</span></label>
<br><br>
<input type=checkbox name="magazine" id="magazine">
<label for="magazine" class="check"><span>Include magazines</span></label>
<br><br>
<input type=checkbox name="certificates" id="certificates">
<label for="certificates" class="check"><span>Include gift certificates</span></label>
<br><br>    
<input type="submit" value="Register">
<br><br>

与问题相关的 CSS 代码:

input[type=checkbox] + label {
  cursor: pointer;
}

label span {
  vertical-align: middle;
}

input[type=checkbox] {
  position: absolute;
  height: 1px;
  width: 1px;
  vertical-align: middle;
  clip: rect(0 0 1 1);
}

input[type=checkbox] + label::before {
  content: "\00a0"; /* non-line breaking space */
  display: inline-block; 
  width:12px;
  height: 12px;  
  text-align: center;
  line-height: 1em;
  font-size: 0.8em; 
  margin-right: 10px;
  border: 0.125em solid #680000; 
  background-color: white;
  vertical-align: middle;
}

input[type=checkbox]:checked + label::before { 
  content: "\2713"; /*checkmark */ 
  color: #680000; 
  background: white;
}

Answer 1

尝试编辑此样式

    input[type=checkbox] {
      position: absolute;
      /* height: 1px; */
      /* width: 1px; */
      left: -2000px;
      vertical-align: middle;
      clip: rect(0 0 1 1);
    }

我评论了宽度和高度，因为它们是点首先出现的原因，并添加了一个 left 属性以将输入发送到屏幕外