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

如何使用CSS绘制勾号符号？我发现使用的符号在美学上并不令人愉快

编辑

---

图标字体是一个很好的建议。我在找这样的东西。

你可以画两个矩形，然后把它们放在一起。然后旋转45度。修改任何变化的宽度/高度/顶部/左侧参数

HTML

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

---

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

ulli:之前
{内容：'\2713'；
显示：内联块；
颜色：红色；
填充：0 6px 0；
}
ul li{列表样式类型：无；字体大小：1em；}

测试1
试验

---

这是演示链接

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

请看这里：

复选框

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

您甚至可以使用带有记号符号图示符和CSS 3动画的web字体。对于IE8，您需要应用polyfill，因为它不理解：选中

---

请参阅JS FIDLE:

现在，您可以包含web字体，甚至只使用所需的字形缩小文件大小。

---

以下介绍了另一种解决方案，适用于只有一个：before/：after psuedo元素可用的情况：

它基本上使用

边框底部

和

边框右侧

属性来创建复选框，然后使用

变换

示例

li{
位置：相对；/*定位：后所需*/
}
李：好了{
列表样式：无；/*删除已完成项的普通项目符号*/
}
完成：之后{
内容：“；
背景色：透明；
/*定位复选框*/
位置：绝对位置；
左-16px；
顶部：0px；
/*设置复选框*/
/*短臂*/
宽度：5px；
边框底部：3px实心#4D7C2A；
/*长臂*/
高度：11px；
右边框：3px实心#4D7C2A；
/*旋转镜像L使其成为复选框*/
变换：旋转（45度）；
-o变换：旋转（45度）；
-ms变换：旋转（45度）；
-webkit变换：旋转（45度）；
}

要执行的操作：

很棒的东西
简单的东西
困难的东西

对字母L进行一些转换

。选中标记{
字体系列：arial；
-ms变换：scaleX（-1）旋转（-35度）；/*IE 9*/
-webkit变换：scaleX（-1）旋转（-35度）；/*铬合金、Safari、Opera*/
变换：scaleX（-1）旋转（-35度）；
}

L

您可能想试试

---

它有很多图标。对你来说，

应该有用。这里也有很多检查图标。希望有帮助。

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

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

试试这个 //html示例

<span>&#10003;</span>

---

这是用于符号标记的简单css

---

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

之后，我使用了类似于bm2ilab过去的答案的方法在复选框中设置勾号。这种技术只使用一个伪元素，因此它保留了语义HTML，并且没有理由添加额外的HTML元素

标签{
光标：指针；
}
输入[type=“checkbox”]{
位置：相对位置；
顶部：2个；
框大小：内容框；
宽度：14px；
高度：14px；
边距：0 5px 0 0；
光标：指针；
-webkit外观：无；
边界半径：2px；
背景色：#fff；
边框：1px实心#b7b7；
}
输入[type=“checkbox”]：在{
内容：''；
显示：块；
}
输入[type=“checkbox”]：选中：之前{
宽度：4px；
高度：9px；
利润率：0px 4px；
边框底部：2个实心#115c80；
右边框：2px实心#115c80；
变换：旋转（45度）；
}

标签

只有css，我觉得很简单：

。选中标记{
显示：内联块；
变换：旋转（45度）；
高度：25px；
宽度：12px；
左缘：60%；
边框底部：7px实心#78b13f；
右边框：7px实心#78b13f；
}

此外，使用，您可以使用以下标记。 朴素美丽

有可能改变CSS中的大小、颜色和其他功能

---

查看结果

在对上面亨利的答案做了一些更改后，我在一个圆圈中打了一个勾号，我来这里是为了找到它，所以在这里添加了我的代码

.snackbar\u圆{
背景色：#f0；
边界半径：13px；
填充：0 5px；
}
.对号{
字体系列：arial；
字体大小：粗体；
-ms变换：scaleX（-1）旋转（-35度）；
-webkit变换：scaleX（-1）旋转（-35度）；
变换：scaleX（-1）旋转（-35度）；
颜色：#63BA3D；
显示：内联块；
}

L

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

HTML

CSS

---

真的很抱歉，这是我的错。这个问题实际上是在寻找一种绘制勾号形状的方法，而不是使用unicode字符（这不适合我的使用）。对不起，我的问题不清楚，我现在编辑了我的问题。谢谢你的建议。是的，刚刚看到你更新了你的问题。。如果是这样的话，我的答案不适合你。是我的，谢谢。你看过图标字体了吗？如果你展示了一个你想要制作的符号的图像，这将是一个无关紧要的话题，但即使如此，你也应该展示你在实现这一点上的最大努力，而不是要求其他人完成所有的工作。（这是否有意义值得怀疑。如果你想使用一个特定的图形符号，请为它创建一个图像。或者用画布API绘制它。CSS不是一个图形程序。）@JukkaK.Korpela我通过回答我自己的问题来展示我的努力。提出这个问题的原因是1）记录我的

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

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

<span>&#10003;</span>

span {
  content: "\2713";
}

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

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