8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

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

Tran To 2月前

27 0

我想用 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)
  • 不幸的是,没有一个 Unicode 表情符号来表示未选中的复选框(但有一对非表情符号,

  • 不要仅仅为了在问题中写代码而发布随机示例代码。分享你正在使用的真实代码(这也表明你在做你想做的事情时付出了努力)

  • 试试这个。注意评论。

    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"> &#9989; </p>
      </div>
      <label>Awesome checkbox</label>
    </body>
    
    </html>
  • 您不需要任何 JS 来实现这一点 - 您仅使用带有 :has() 和 :checked 选择器的 CSS 即可实现。

返回
作者最近主题: