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

Question

如何使用CSS 绘制刻度符号？我使用Unicode找到的符号在美学上并不令人愉悦.

编辑 图标字体是一个很好的建议.我一直在寻找像这样.

Answer 1

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

演示1

演示2(带圆圈)

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

Answer 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/

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

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

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

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

Answer 5

一个额外的解决方案,当你只有一个:之前/:后面的psuedo-elements可用时,这里描述:: after-Checkbox using border

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

例

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>

Answer 6

您现在可以包含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;
}

Answer 7

试试这个 // html 示例

<span>&#10003;</span>

// CSS 示例

span {
  content: "\2713";
}

Answer 8

我过去使用过类似于 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>

Answer 9

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

.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 的动画