用图像或任何其他符号替换HTML复选框的“勾号”标记

概述参见英文答案 > Pure CSS Checkbox Image replacement                                    3个 如何在HTML复选框中使用不同的图形(图像或其他符号)而不是默认的刻度标记. 我读了许多SO问题,但不能那样做.正如我在this question to change the color of the tick mark和this所见 参见英文答案 > Pure CSS Checkbox Image replacement                                    3个
如何在HTML复选框中使用不同的图形(图像或其他符号)而不是默认的刻度标记.

我读了许多SO问题,但不能那样做.正如我在this question to change the color of the tick mark和this所见.所有这些都是老问题.但它太复杂了.

有没有简单的方法来做到这一点.我希望现在有一个简单而好的方法吗？

解决方法 实际上,使用CSS和伪元素这是一种简单的方法.我正在使用内容在Unicode中添加复选标记,但您也可以使用背景,只需确保定位正确.

这个实现只需要一个复选框本身,所以没有额外的标签等……你的文本标签甚至可以在任何地方正常运行！

input[type="checkBox"]{    -webkit-appearance: initial;    appearance: initial;    background: gray;    wIDth: 40px;    height: 40px;    border: none;    background: gray;    position: relative;}input[type="checkBox"]:checked {    background: red;}input[type="checkBox"]:checked:after {    /* Heres your symbol replacement - this is a tick in Unicode. */    content: "13";    color: #fff;    /* The following positions my tick in the center,* but you Could just overlay the entire Box     * with a full after element with a background if you want to */    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%);    /*     * If you want to fully change the check appearance,use the following:     * content: " ";     * wIDth: 100%;     * height: 100%;     * background: blue;     * top: 0;     * left: 0;     */}

<input type="checkBox" />

总结

以上是内存溢出为你收集整理的用图像或任何其他符号替换HTML复选框的“勾号”标记全部内容，希望文章能够帮你解决用图像或任何其他符号替换HTML复选框的“勾号”标记所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。