如何使用 CSS 绘制复选标记/勾号？答案

【问题标题】：How to draw a checkmark / tick using CSS?如何使用 CSS 绘制复选标记/勾号？
【发布时间】：2014-03-24 23:31:56
【问题描述】：

如何使用 CSS绘制勾号？我发现使用 Unicode 的符号并不美观。

编辑图标字体是一个很好的建议。我正在寻找类似this 的东西。

【问题讨论】：

你看过图标字体吗？ fortawesome.github.io/Font-Awesome/icons
如果您展示了您希望制作的符号的图像，这将有点话题，但即便如此，您也应该尽最大努力实现这一目标，而不是要求别人做所有事情工作。（这是否有意义值得怀疑。如果您希望使用特定的图形符号，请为其创建图像。或者使用 Canvas API 绘制它。CSS 不是图形程序。）
@JukkaK.Korpela 我确实通过回答我自己的问题来表现出努力。问题的原因是1）记录我自己的解决方案，这样我就不会忘记，2）看看是否有更好的解决方案。例如，图标字体对我来说是新的。
您通过编辑问题来澄清问题，指定您要问什么（而不是评论答案），而不是通过发布答案。一个问题应该是完全可以理解的，无需阅读 cmets 和答案。
@JukkaK.Korpela 我编辑了问题以在您提出建议后进行澄清。在发布问题之前我已经有了答案，我只是本着与他人分享答案的精神。我很欣赏你的作品和你的书（我现在可能只是拿一本！），我会记住你的建议以备不时之需。

标签： css drawing css-shapes

【解决方案1】：

您可以绘制两个矩形并将它们彼此相邻放置。然后旋转45度。修改任何变化的宽度/高度/顶部/左侧参数。

DEMO 1

DEMO 2 (With circle)

HTML

<span class="checkmark">
    <div class="checkmark_stem"></div>
    <div class="checkmark_kick"></div>
</span>

CSS

.checkmark {
    display:inline-block;
    width: 22px;
    height:22px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

.checkmark_stem {
    position: absolute;
    width:3px;
    height:9px;
    background-color:#ccc;
    left:11px;
    top:6px;
}

.checkmark_kick {
    position: absolute;
    width:3px;
    height:3px;
    background-color:#ccc;
    left:8px;
    top:12px;
}

【讨论】：

我喜欢它。这是一个只有 1 个元素：jsfiddle.net/mirohristov/awayF/473
这是一个没有圆圈只有一个元素的：jsfiddle.net/awayF/810
谢谢。它帮助了我的一些附带项目（：
谢谢，那“十字架”呢

【解决方案2】：

这是另一个 CSS 解决方案。它需要更少的代码行。

ul li:before
{
    content: '\2713';
    display: inline-block;
    color: red;
    padding: 0 6px 0 0;
}

ul li
{
    list-style-type: none;
    font-size: 1em;
}

<ul>
    <li>test1</li>
    <li>test</li>
</ul>

这里是演示链接http://jsbin.com/keliguqi/1/

【讨论】：

真的很抱歉，这是我的错。这个问题实际上是在寻找一种绘制刻度形状的方法，而不是使用 unicode 字符（这不适合我的用途）抱歉我的问题不清楚，我现在已经编辑了我的问题。谢谢你的建议。
是的，刚刚看到你更新了你的问题。那么我的回答不适合你。

【解决方案3】：

用字母 L 做一些变换

.checkmark {
  font-family: arial;
  -ms-transform: scaleX(-1) rotate(-35deg); /* IE 9 */
  -webkit-transform: scaleX(-1) rotate(-35deg); /* Chrome, Safari, Opera */
  transform: scaleX(-1) rotate(-35deg);
}

&lt;div class="checkmark"&gt;L&lt;/div&gt;

【讨论】：

这是一个很酷的技巧，但转换应该在虚拟 :after 元素中完成，因此容器保持正常的内联块而无需转换 - 例如：jsfiddle.net/viliusl/1vgxwLya/5
这就是我所说的创造性方法:)

【解决方案4】：

只有css，我觉得很简单：

.checkmark {
      display: inline-block;
      transform: rotate(45deg);
      height: 25px;
      width: 12px;
      margin-left: 60%; 
      border-bottom: 7px solid #78b13f;
      border-right: 7px solid #78b13f;
    }

&lt;div class="checkmark"&gt;&lt;/div&gt;

【讨论】：

【解决方案5】：

您现在可以包含网络字体，甚至可以仅使用您需要的字形缩小文件大小。 https://github.com/fontello/fontello http://fontello.com/

li:before {
  content:'[add icon symbol here]';
  font-family: [my cool web icon font here];
  display:inline-block;
  vertical-align: top;
  line-height: 1em;
  width: 1em;
  height:1em;
  margin-right: 0.3em;
  text-align: center;
  color: #999;
}

【讨论】：

【解决方案6】：

当您只有一个 :before / :after 伪元素可用时，此处描述了另一种解决方案：:after-Checkbox using borders

它基本上使用border-bottom和border-right属性来创建复选框，然后使用transform旋转镜像L

示例

li {
  position: relative; /* necessary for positioning the :after */
}

li.done {
  list-style: none; /* remove normal bullet for done items */
}

li.done:after {
  content: "";
  background-color: transparent;
  
  /* position the checkbox */
  position: absolute;
  left: -16px;
  top: 0px;

  /* setting the checkbox */
    /* short arm */
  width: 5px;
  border-bottom: 3px solid #4D7C2A;
    /* long arm */
  height: 11px;
  border-right: 3px solid #4D7C2A;
  
  /* rotate the mirrored L to make it a checkbox */
  transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

To do:
<ul>
  <li class="done">Great stuff</li>
  <li class="done">Easy stuff</li>
  <li>Difficult stuff</li>
</ul>

【讨论】：

+1。这只有在浏览器允许伪元素时才有用（但即使 IE8 也允许，所以应该不是问题），但当您无法更改页面的结构 (HTML) 时，它是理想的。此外，如果您只需要一个符号，它就不需要图标字体。
说得好，这是真的，但我认为最大的问题是transform CSS，因为那是 CSS3。我将此代码用于我的自定义表单 CSS。由于我已经使用 :before 作为它周围的框，我不得不寻找一种方法让它在 :after 元素中工作。
@dayuloli 实际上，限制在于允许稍后实施的转换的能力。无论如何，既然 IE9 和所有现代浏览器都允许转换，所以应该没问题
如果我需要一个 li 为空怎么办？意思是我只需要复选标记，没有文字？
@parsecer 删除内文即可；)

【解决方案7】：

我过去曾使用类似于 BM2ilabs 的答案来设置复选框中的勾号样式。该技术仅使用单个伪元素，因此它保留了语义 HTML，并且没有理由添加额外的 HTML 元素。

label {
  cursor: pointer;
}

input[type="checkbox"] {
  position: relative;
  top: 2px;
  box-sizing: content-box;
  width: 14px;
  height: 14px;
  margin: 0 5px 0 0;
  cursor: pointer;
  -webkit-appearance: none;
  border-radius: 2px;
  background-color: #fff;
  border: 1px solid #b7b7b7;
}

input[type="checkbox"]:before {
  content: '';
  display: block;
}

input[type="checkbox"]:checked:before {
  width: 4px;
  height: 9px;
  margin: 0px 4px;
  border-bottom: 2px solid #115c80;
  border-right: 2px solid #115c80;
  transform: rotate(45deg);
}

<label>
  <input type="checkbox" name="check-1" value="Label">Label
</label>

【讨论】：

简单完美的解决方案

【解决方案8】：

我喜欢这种方式，因为您不需要只创建两个组件。

.checkmark:after {
    opacity: 1;
    height: 4em;
    width: 2em;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    border-right: 2px solid #5cb85c;
    border-top: 2px solid #5cb85c;
    content: '';
    left: 2em;
    top: 4em;
    position: absolute;
}

Animation from Scott Galloway Pen

【讨论】：

【解决方案9】：

试试这个 // html示例

<span>&#10003;</span>

// css 示例

span {
  content: "\2713";
}

【讨论】：

这些示例使用 unicode 复选标记，OP 想要替代方案。（除非您将其设置为 span:before 或 span:after，否则此 css 示例将不起作用）

【解决方案10】：

我建议使用勾号而不是绘制它。或者使用免费的网络字体，例如：fontello[dot]com 您可以用网络字体字形替换刻度符号。

列表

ul {padding: 0;}
li {list-style: none}
li:before {
  display:inline-block;
  vertical-align: top;
  line-height: 1em;
  width: 1em;
  height:1em;
  margin-right: 0.3em;
  text-align: center;
  content: '✔';
  color: #999;
}

请看这里：http://jsfiddle.net/hpmW7/3/

复选框

您甚至拥有带有刻度符号字形和 CSS 3 动画的网络字体。对于 IE8，您需要应用 polyfill，因为它不理解 :checked。

input[type="checkbox"] {
  clip: rect(1px, 1px, 1px, 1px);
  left: -9999px;
  position: absolute !important;
}
label:before,
input[type="checkbox"]:checked + label:before {
  content:'';
  display:inline-block;
  vertical-align: top;
  line-height: 1em;
  border: 1px solid #999;
  border-radius: 0.3em;
  width: 1em;
  height:1em;
  margin-right: 0.3em;
  text-align: center;
}
input[type="checkbox"]:checked + label:before {
  content: '✔';
  color: green;
}

见 JS 小提琴：http://jsfiddle.net/VzvFE/37

【讨论】：

【解决方案11】：

li:before {
    content: '';
    height: 5px;
    background-color: green;
    position: relative;
    display: block;
    top: 50%;
    left: 50%;
    width: 9px;
    margin-left: -15px;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
li:after {
    content: '';
    height: 5px;
    background-color: green;
    position: relative;
    display: block;
    top: 50%;
    left: 50%;
    width: 20px;
    margin-left: -11px;
    margin-top: -6px;
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

【讨论】：

【解决方案12】：

在对上面亨利的答案进行了一些更改后，我得到了一个圆圈，我来这里寻找那个，所以在这里添加我的代码。

.snackbar_circle {
  background-color: #f0f0f0;
  border-radius: 13px;
  padding: 0 5px;
}

.checkmark {
  font-family: arial;
  font-weight: bold;
  -ms-transform: scaleX(-1) rotate(-35deg);
  -webkit-transform: scaleX(-1) rotate(-35deg);
  transform: scaleX(-1) rotate(-35deg);
  color: #63BA3D;
  display: inline-block;
}

<span class="snackbar_circle">
   <span class="checkmark">L</span>
</span>

【讨论】：

【解决方案13】：

你可能想试试fontawesome.io

它有很多图标。对你来说<i class="fa fa-check" aria-hidden="true"></i> 应该可以。这里面也有很多复选图标。希望对您有所帮助。

【讨论】：

【解决方案14】：

另外，使用awesome font，您可以使用以下标签。简单漂亮

可以在 CSS 中更改大小和颜色以及其他功能

查看结果here

【讨论】：

【解决方案15】：

这是我制作“选中”按钮的变体

HTML

<button class="unchecked" type="submit" onclick="clickMe(this); return false;" value="something"></button>

JavaScript

function clickMe(data) {
  data.classList.add("checked");
}

CSS

.unchecked::before { content: "C"; }
.unchecked { border-radius: 50%; outline: none; }
.checked::before { content: "L"; }
.checked { background-color: green; transform: rotate(45deg) scaleX(-1); }

【讨论】：

【解决方案16】：

这是 Sign Mark 的简单 css。

ul li:after{opacity: 1;content: '\2713';right: 20px;position: absolute;font-size: 20px;font-weight: bold;}

【讨论】：

这个答案对现有答案没有任何帮助 - stackoverflow.com/a/21968665/2317532