logo标签列表

HTML/XHTML中的勾选符号

htmlxhtml
294
我们需要在一个内部网页应用程序中显示一个勾号符号（✓或✔），并希望避免使用图像。
必须从IE 6.0.2900开始工作在XP框，最好能跨浏览器（IE +最新版本的FF）。
以下显示方格，尽管设置了浏览器编码为UTF-8（META效果良好，不存在问题）。默认字体是Times New Roman（可能是个问题，但尝试Lucida Sans Unicode无法解决，而我也没有安装Arial Unicode MS或Lucida Grande）。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
 &#10003; &#10004;
</body>
</html>

任何帮助都受到赞赏。

以下内容适用于IE 6.0和IE 7：

<html>
<head>

</head>
<body>
 <span style="font-family: wingdings; font-size: 200%;">&#252;</span>
</body>
</html>

我希望有人能在 Windows 上使用 FF 进行测试。我很确定它在非 Windows 的计算机上无法运行。

1
一个打勾符号应该长什么样？ - John Feminella
3
Sam，请查看这个问题。 - Vlad Gudim
这里有两个：http://amp-what.com/#q=check%20mark&#x2713 &#x2714 - ndp
@John：tick = 对勾 - BobRodes
Wingdings的解决方案在Chrome中运行良好，更重要的是被我们的HTML转PDF生成器所理解。 - zzapper
显示剩余3条评论
14个回答
5
.className {
   content: '\&#x2713';
}

使用CSS content属性，您可以使用图像或其他代码设计来显示勾选标记。
不确定：http://www.w3schools.com/cssref/pr_gen_content.asp 显示与Firefox兼容。 - s-sharma
请检查 http://todomvc.com/labs/architecture-examples/react/ 是否正常工作，因为他们正在使用内容进行勾选。 - s-sharma
4
如果你想在 CSS 内容中使用 UTF-8 编码，可以这样做：.class{ content: "\2713"; }。 - Morteza
2

使用 WebDing 或 WingDing 字体是实现本主题目标的唯一方法：它必须从 IE 6.0.2900 开始正常工作。因此，我会在这里发布一些字体，并对上面发布的内容进行一些更正：

Cross
<span style="font-family: Wingdings;">&#251;</span><br>
    
Check
<span style="font-family: Wingdings;">&#252;</span><br>

Crossed Checkbox
<span style="font-family: Wingdings;">&#253;</span><br>
    
Checked Checkbox
<span style="font-family: Wingdings;">&#254;</span><br>
    
Empty Checkbox
<span style="font-family: Wingdings;">&#168;</span><br>
    
Thick Check
<span style="font-family: Webdings;">&#97;</span><br>
    
Friendly asked in comments
<div style="display: inline; font-family: Wingdings; font-size: 15px; background-color: lightblue; border: 2px solid black; padding: 1px 4px 0 2px;">&#252;</div>

参考资料如下： wingdings webdings

1
你好，Dmitry！是否可以修改“已勾选的复选框”，使其变成白色的方框，黑色的勾号，即使我们有蓝色背景也是如此？ - Mary Star
当然，可以使用div标签代替，并添加边框（参见最后一个示例）。如果您想将其设置为空，请将颜色设置为透明。 - Dmitry Babich
0

您可以使用Base64编码的GIF添加一个小白色（在线生成器在此）：

url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==")

例如，使用 Chrome，我将其用于样式化复选框控件：
INPUT[type=checkbox]:focus
{
outline:1px solid rgba(0,0,0,0.2);
}

INPUT[type=checkbox]
{
background-color: #DDD;
border-radius: 2px;
-webkit-appearance: button;
width: 17px;
height: 17px;
margin-top: 1px;
cursor:pointer;
}

INPUT[type=checkbox]:checked
{
background:#409fd6 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat;
}

如果你只想在IMG标签中使用它，你可以将勾号/选中标记写成：

<img alt="" src="data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==" width="11" height="10">
0

你可以使用 ⊕ 或 ⊗

1
那些不是打勾符号，它们是加减号被圈起来的。 - GKFX
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接