如何使用CSS绘制一个勾选/打钩的标记？

Question

如何使用CSS绘制一个勾选/打钩的标记？

cssdrawingcss-shapes

96

如何使用CSS绘制勾号符号？我发现使用Unicode找到的符号不太美观。请参考以下内容：编辑图标字体是一个很好的建议。我正在寻找像this这样的东西。

- dayuloli

3

你看过图标字体吗？http://fortawesome.github.io/Font-Awesome/icons/ - cimmanon

1

如果您展示了一个您想要生成的符号图像，那么这可能会略微与主题相关，但即使如此，您也应该展示出您自己最好的努力来实现它，而不是让别人来完成所有工作。（而且这是否有意义还是值得商榷的。如果您想使用特定的图形符号，请为其创建一个图像。或者使用Canvas API绘制它。CSS并不是一个图形程序。） - Jukka K. Korpela

@JukkaK.Korpela 我已经通过回答自己的问题展示了努力。提出这个问题的原因是为了1）记录我自己的解决方案，以免忘记，2）看看是否有更好的解决方案。例如，图标字体对我来说是新事物。 - dayuloli

你可以通过编辑问题来澄清它，以指定你正在询问什么（而不是评论答案），而不是发布答案。一个问题应该在不阅读评论和答案的情况下完全可理解。 - Jukka K. Korpela

@JukkaK.Korpela，在您的建议下，我编辑了问题以澄清。在发布问题之前，我已经有了答案，只是想与其他人分享这个答案。我很欣赏您的工作和您的书（我现在可能会去买一本！），我将牢记您的建议，以备将来之需。 - dayuloli

19个回答

101

这里是另一种 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>

- Kheema Pandey

1

非常抱歉，这是我的错。实际上，问题是要找到一种绘制勾号形状的方法，而不是使用Unicode字符（这不适合我的用途）。对不起，我的问题没有表达清楚，我现在已经编辑了我的问题。感谢您的建议。 - dayuloli

是的，我刚看到你更新了问题。在这种情况下，我的答案不适合你。 - Kheema Pandey

67

对字母 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);
}

<div class="checkmark">L</div>

- Henry

3

这是一个很酷的技巧，但转换应该在虚拟的:after元素中完成，这样容器就可以保持正常的内联块而不需要进行转换 - 例如：https://jsfiddle.net/viliusl/1vgxwLya/5/ - ViliusL

3

这就是我所说的创意方法 :) - Illia Kuzma

64

只用 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;
    }

<div class="checkmark"></div>

- Petronella

27

当你只有: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>

- Philip

2

+1. 这只有在浏览器允许伪元素的情况下才有效（但即使IE8也支持，所以不应该是问题），但在无法更改页面结构（HTML）的情况下非常理想。此外，如果您只需要一个符号，则无需图标字体。 - dayuloli

好的评论，没错。但是我认为最大的问题可能在于transform CSS，因为那是CSS3的功能。我使用了这段代码来自定义表单的CSS。既然我已经用了:before来围绕它的框，我必须寻找一种方法让它在只有:after元素的情况下工作。 - Philip

@dayuloli 实际上，限制在于允许转换的能力是后来实施的。不管怎样，自从IE9和所有现代浏览器都允许转换，所以应该没问题。 - brunoais

如果我需要一个空的li，只需要勾选标记而没有文本怎么办？ - parsecer

@parsecer 只需删除内部文本 ;) - Philip

26

现在你可以使用Web字体，甚至只需包括所需的字形，就可以缩小文件大小。 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;
}

- JohanVdR

12

我过去使用过类似BM2ilabs答案的方法来为复选框样式打勾。这种技术仅使用单个伪元素，因此它保留了语义化的HTML，并且没有理由添加其他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;
  transition: transform 200ms;
}

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>

- matthewd

3

简单完美的解决方案 - Varatharaj

6

尝试这个 // HTML示例

<span>&#10003;</span>

// CSS示例

span {
  content: "\2713";
}

- silvedo

1

这些示例使用Unicode勾号，OP想要替代方案。(而且这个CSS示例只会在你将其设置为span:before或span:after时起作用) - barbsan

6

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

.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;
}

这是来自 Scott Galloway Pen 的动画。

$('#toggle').click(function() {
  $('.circle-loader').toggleClass('load-complete');
  $('.checkmark').toggle();
});

body {
  padding: 5em;
  text-align: center;
}

h1 {
  margin-bottom: 1em;
}

.circle-loader {
  margin-bottom: 3.5em;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-left-color: #5cb85c;
  animation: loader-spin 1.2s infinite linear;
  position: relative;
  display: inline-block;
  vertical-align: top;
  border-radius: 50%;
  width: 7em;
  height: 7em;
}

.load-complete {
  -webkit-animation: none;
  animation: none;
  border-color: #5cb85c;
  transition: border 500ms ease-out;
}

.checkmark {
  display: none;
}

.checkmark.draw:after {
  animation-duration: 800ms;
  animation-timing-function: ease;
  animation-name: checkmark;
  transform: scaleX(-1) rotate(135deg);
}

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

@keyframes loader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 1.75em;
    opacity: 1;
  }
  40% {
    height: 3.5em;
    width: 1.75em;
    opacity: 1;
  }
  100% {
    height: 3.5em;
    width: 1.75em;
    opacity: 1;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<h1>Circle loader with checkmark completed state <small>CSS Animation</small></h1>

<div class="circle-loader">
  <div class="checkmark draw"></div>
</div>

<p><button id="toggle" type="button" class="btn btn-success">Toggle Completed</button></p>

- BM2ilabs

3

我建议使用勾号符号而不是绘制它。或者使用免费的网络字体，例如：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;
}

body {
  font-size: 75%;
}

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;
}

<ul>
  <li>This is a list item</li>
  <li>This is a list item</li>
</ul>

复选框

你甚至可以使用带有勾选符号字形和CSS 3动画的Web字体。对于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;
}

body {
  font-size: 75%;
}

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;
}

<input type="checkbox" value="Option 1" name="option_1" id="option_1" />
<label for="option_1">option 1</label>

- JohanVdR

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dayuloli · Accepted Answer

您可以绘制两个矩形并将它们放在一起。然后旋转45度。修改任何变体的宽度/高度/顶部/左侧参数。

演示1

.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;
}

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

演示 2（带圆形）

.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_circle {
  position: absolute;
  width: 22px;
  height: 22px;
  background-color: green;
  border-radius: 11px;
  left: 0;
  top: 0;
}

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

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

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