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

问题描述 投票：0回答：19

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

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

css drawing css-shapes
19个回答
110
投票

您可以绘制两个矩形并将它们并排放置。然后旋转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>

DEMO 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>

97
投票

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

66
投票

用字母 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>

63
投票

只有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>

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>

26
投票

您现在可以包含网络字体，甚至可以仅使用所需的字形缩小文件大小。 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;
}
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>

6
投票

试试这个 // html 示例

<span>&#10003;</span>

// CSS 示例

span {
  content: "\2713";
}
5
投票

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

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

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 动画的网页字体。对于 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>

2
投票
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);
}
2
投票

对亨利的答案进行一些更改后，我在一个圆圈中打勾，我来这里寻找它，所以在这里添加我的代码。

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

1
投票

您可能想尝试 fontawesome.io

它有大量的图标。对你来说 

<i class="fa fa-check" aria-hidden="true"></i>
应该有效。这里面也有很多检查图标。希望有帮助。

1
投票

如果您想要一个勾号，您可能还想要一个带有背景颜色的十字。

.icon {
  display: inline-block;
  width: 22px; height: 22px;
  border-radius: 50%;
  transform: rotate(45deg);
}
.icon::before, .icon::after { position: absolute; content: ''; background-color: #fff; }
.icon.icon-success          { background: green; }
.icon.icon-success:before   { width:  3px; height:  9px; top:  6px; left: 11px; }
.icon.icon-success:after    { width:  3px; height:  3px; top: 12px; left:  8px; }
.icon.icon-failure          { background: lightcoral; }
.icon.icon-failure::before  { width:  3px; height: 12px; top:  5px; left: 10px; }
.icon.icon-failure::after   { width: 12px; height:  3px; top: 10px; left:  5px; }
<i class="icon icon-success"></i>
<i class="icon icon-failure"></i>

0
投票

我们可以使用CSS伪元素来制作复选标记/勾号。假设我们的 HTML 中有一个 span 标签，并且我们想在该 span 之前放置复选标记。我们可以简单地这样做：

<span class="check_text">Some Text</span>

现在，我们可以像这样添加CSS：

span.check_text:before {
    position: absolute;
    height: 15px;
    width: 5px;
    border-bottom: 3px solid red;
    border-right: 3px solid red;
    content: "";
    transform: rotate(45deg);
    left: -25px;
    top: 2px;
}
0
投票

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

function clickMe(data) {
  data.classList.add("checked");
}
.unchecked::before {
  content: "C";
}

.unchecked {
  border-radius: 50%;
  outline: none;
}

.checked::before {
  content: "L";
}

.checked {
  background-color: green;
  transform: rotate(45deg) scaleX(-1);
}
<button class="unchecked" type="submit" onclick="clickMe(this); return false;" value="something"></button>

0
投票

此外，使用awesome font，您可以使用以下标签。 简单又美丽

可以更改 CSS 中的大小、颜色和其他功能

查看结果：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<h1>fa fa-check-circle</h1>

<i class="fa fa-check-circle"></i>
<i class="fa fa-check-circle" style="font-size:24px"></i>
<i class="fa fa-check-circle" style="font-size:36px"></i>
<i class="fa fa-check-circle" style="font-size:48px;color:red"></i>
<br>

<p>Used on a button:</p>
<button style="font-size:24px">Button <i class="fa fa-check-circle"></i></button>

<p>Unicode:</p>
<i style="font-size:24px" class="fa">&#xf058;</i>

0
投票

.checkmark{
display: flex;
background-color: transparent;
margin: 10px;
padding: 40px;
height: 60px;
width: 50px;
transform: rotate(45deg);
border: 1px black;
justify-content: right;
align-items: flex-end;
}
.tick1{
height: 15px;
width: 18px;
background-color: #ccc;
border: 1px solid #ccc;
}
.tick2{
height: 60px;
width: 15px;
background-color: #ccc;
border: 1px solid #ccc;
}
<div class="checkmark">
  <div class="tick1"></div>
  <div class="tick2"></div>
</div>

-2
投票

这是标志标记的简单 CSS。

ul li:after{不透明度: 1;内容: '�3';右: 20px;位置: 绝对;字体大小: 20px;字体粗细: 粗体;}

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.