我是否可以不使用 ::before 和 ::after 而用 Unicode 字符设置复选框的样式？-css-IT问答社区-解决你的IT疑问

我是否可以不使用 ::before 和 ::after 而用 Unicode 字符设置复选框的样式？

Tran To 2月前

我想用 unicode 复选框标记替换复选框的内容。但我已经需要 ::before 和 ::after 来做其他事情了。有没有一种 css 方式可以更改标签本身的内容？E...

我想用 unicode 复选框标记替换复选框的内容。但我已经需要 ::before 和 ::after 来做其他事情了。有没有一种 CSS 方式可以更改标签本身的内容？

编辑：有人请求我当前的 html 和 css，你看......

<!DOCTYPE html>
<html><head>
  <title>Example</title>
  <style>
    input[type="checkbox"]
    {
      appearance:none;
    }
  </style>
</head><body>
  <input type="checkbox" />
</body></html>

帖子版权声明 1、本帖标题：我是否可以不使用 ::before 和 ::after 而用 Unicode 字符设置复选框的样式？
本站网址：http://xjnalaquan.com/
2、本网站的资源部分来源于网络，如有侵权，请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
5、站长邮箱：yeweds@126.com 除非注明，本帖由Tran To在本站《css》版块原创发布，转载请注明出处！

最新回复 (0)

最新倒序只看楼主

Kourosh 2月前 0 只看Ta

引用 2楼

不幸的是，没有一个 Unicode 表情符号来表示未选中的复选框（但有一对非表情符号，
membersound 2月前 0 只看Ta

引用 3楼

不要仅仅为了在问题中写代码而发布随机示例代码。分享你正在使用的真实代码（这也表明你在做你想做的事情时付出了努力）
Ecanyte 2月前 0 只看Ta

引用 4楼
试试这个。注意评论。
document.querySelector(".checkbox-container").addEventListener("click", () => { let checked = document.querySelector(".example").checked; let label = document.querySelector(".check-text"); // Pick your own unicode character if you want to if (checked) label.textContent = "\u2610"; else label.textContent = "\u2705"; // Use value depending on how you want to process input document.querySelector(".example").checked = !checked; })

.example { display: none; } .checkbox-container { display: inline; /* optional */ cursor: default; }

<!DOCTYPE html> <html> <body> <div class="checkbox-container"> <input type="checkbox" class="example" checked=false> <label class="check-text"> ✅ </p> </div> <label>Awesome checkbox</label> </body> </html>
Hossein Abedi 2月前 0 只看Ta

引用 5楼

您不需要任何 JS 来实现这一点 - 您仅使用带有 :has() 和 :checked 选择器的 CSS 即可实现。