将HTML复选框的“Tick”标记替换为图像或任何其他符号。

5 浏览
0 Comments

将HTML复选框的“Tick”标记替换为图像或任何其他符号。

我如何在HTML复选框中使用不同的图形（图像或其他符号），而不是默认的“勾号”？

我阅读了许多SO的问题，但无法做到。我看到了这个问题来改变勾号的颜色和这个。所有这些都是旧问题。但它太复杂了。

有没有简单的方法来做到这一点。我希望现在有一种简单而更好的方法？

0

2 答案

0 Comments

问题的出现原因：

用户想要将HTML复选框的"Tick"标记替换为图像或其他符号。

解决方法：

通过使用CSS和伪元素，可以很容易地实现这一点。在这个实现中，使用content来添加一个Unicode中的勾号，但也可以使用背景图像，只需确保位置正确即可。

此实现只需要复选框本身，不需要额外的标签等。甚至可以从任何位置正确地使用文本标签！

以下是解决方案的代码：

input[type="checkbox"]{
    -webkit-appearance: initial;
    appearance: initial;
    width: 40px;
    height: 40px;
    border: none;
    background: gray;
    position: relative;
}
input[type="checkbox"]:checked {
    background: red;
}
input[type="checkbox"]:checked:after {
    /* 这是您要替换的符号 - 这是Unicode中的一个勾号。 */
    content: "\2713";
    color: #fff;
    /* 下面的代码将勾号定位在中心，
     * 但您也可以通过覆盖整个框
     * 使用带有背景的完整的after元素来实现 */
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    /*
     * 如果要完全改变勾号的外观，请使用以下代码：
     * content: " ";
     * width: 100%;
     * height: 100%;
     * background: blue;
     * top: 0;
     * left: 0;
     */
}

以下是HTML代码：

<input type="checkbox" />

0
0 Comments

这是一个非常简单和纯HTML和CSS的示例，用于自定义复选框。

问题的原因是HTML中的复选框默认显示为一个勾选标记（），但有时候我们可能希望用图像或其他符号来替代这个勾选标记。

解决方法是使用CSS伪元素(:before和:after)来创建自定义的复选框样式。具体的步骤如下：

1. 在CSS中，通过设置[type="checkbox"]:not(:checked) + label:before和[type="checkbox"]:checked + label:before的样式，来创建复选框的外观。这包括设置边框、背景色、边框圆角等。

2. 通过设置[type="checkbox"]:not(:checked) + label:after和[type="checkbox"]:checked + label:after的样式，来创建复选框被选中时的标记。在这个例子中，使用了一个符号作为标记，通过设置字体大小和颜色来控制标记的外观。

3. 通过设置[type="checkbox"]:disabled:not(:checked) + label:before和[type="checkbox"]:disabled:checked + label:before的样式，来创建禁用状态下的复选框外观。

4. 通过设置[type="checkbox"]:disabled:checked + label:after的样式，来创建禁用状态下复选框被选中时标记的外观。

5. 通过设置[type="checkbox"]:disabled + label的样式，来创建禁用状态下复选框标签的外观。

6. 为了增强可访问性，可以通过设置[type="checkbox"]:checked:focus + label:before和[type="checkbox"]:not(:checked):focus + label:before的样式，来创建获取焦点时复选框的外观。

通过以上的CSS样式设置，我们可以自定义复选框的外观，并且可以在不同的状态下（选中、未选中、禁用）显示不同的标记。

在HTML中，使用标签来创建复选框，并使用

以上就是如何用图像或其他符号替换HTML复选框中的勾选标记的方法。

0