Question

如何删除复选框中的勾号并将其替换为字母？

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

w3schools.com 要么 JSFiddle

Answer 1

我使用的方法是在<span>旁边放置一个<input>元素，该元素将复选标记保留，然后使用CSS隐藏默认样式，而是将复选标记放置在其中。现在，我试图用一个漂亮的选中标记替换默认值，而您正在尝试用字母替换它。

棘手的是，我实际上是在使用矩形并更改边框以将其变为选中标记。我想您也可以在跨度内使用对勾符号，以便在您遇到的情况下使用，如果您希望在选中时在其中带有“ A”的框。更改我的:: after代码（摆脱边界），然后放content:"A"，然后稍稍更改位置。

HTML

<label class="checkbox__container">
    <input type="checkbox" class="person__checkbox" />
    <span class="checkmark"></span>
</label>

CSS

/* Customize the label (the container) */
.checkbox__container {
    display: block;
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    height: 25px;
  }

  /* Hide the browser's default checkbox */
  .checkbox__container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }

  /* Create a custom checkbox */
  .checkbox__container .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
  }

  /* Create the checkmark/indicator (hidden when not checked) */
  .checkbox__container:after {
    content: "";
    position: absolute;
    display: none;
  }

  /* Show the checkmark when checked */
  .checkbox__container input:checked ~ .checkmark:after {
    display: block;
  }

  /* Style the checkmark/indicator */
  .checkbox__container .checkmark:after {
    content: "";
    position: absolute;
    left: 8px;
    top: 4px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }

Answer 2

在当前代码中，这将创建复选标记：

.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

请注意，它是通过使用旋转的正方形的边框创建的（因此标记实际上是正方形的角）。您可以通过删除边框属性并添加一个content: "Y"（例如，用Y代替复选标记）来实现所需的任何功能。但是您还必须在该样式的其余样式上进行尝试，以使其看起来不错。

Answer 3

如果要执行的操作是在单击选中的标记后以编程方式将其删除，则可以使用jquery / javascript来简单地获取目标元素，然后应用click事件。

$('#check_box input:checked').each(function() {
    $(this).click();
});

or 

let element = document.getElementById("checkboxElement");
    element.click();

如何删除自定义复选框中的勾号？

3 个答案: