小开

使用×-mark(乘法符号)，HTML中的×如何?

“x”(字母)不能用来表示字母x以外的任何东西。

小开

忘记字体，使用背景图像!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>Select :after pseudo class/element</title>
<style type="text/css">
.close {
background:url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/images/ui-icons_222222_256x240.png) NO-REPEAT -96px -128px;
text-indent:-10000px;
width:20px;
height:20px;
}
</style>
</head>
<body>
<input type="button" class="close" value="Close" />
<button class="close">Close</button>
</body>
</html>

对于使用屏幕阅读器访问页面的用户来说，这将更容易访问。

小开

最佳答案

控制自己真的很有效。HTML代码是✖。

另一种方法是&#x2715:

小开

这对我来说很管用:

<style>
a.closeX {
position: absolute;
right: 0px; top: 0px; width:20px;
background-color: #FFF; color: black;
margin-top:-15px; margin-right:-15px; border-radius: 20px;
padding-left: 3px; padding-top: 1px;
cursor:pointer; z-index: -1;
font-size:16px; font-weight:bold;
}
</style>
<div id="content">
<a class="closeX" id="closeX" onclick='$("#content").hide();'>&#10006;</a>
Click "X" to close this box
</div>

小开

正如@Haza指出的，可以使用时间符号。Twitter引导将此映射到关闭图标，用于消除情态动词和警告等内容。

<button class="close">&times;</button>

小开

我更喜欢字体Awesome: http://fortawesome.github.io/Font-Awesome/icons/

你要找的图标是fa-times。使用起来很简单:

<button><i class="fa fa-times"></i> Close</button>

这里提琴

小开

× ×或×(同样的东西)U+00D7乘号

×相同的字符与强字体权重

⨯⨯ U+2A2F吉布斯积

7 ✖ U+2716重乘号

还有一个表情符号❌如果你支持的话。如果你没有，你只是看到一个正方形= ❌

当我和一个设计师一起工作时，我也做了这个简单的代码示例在Codepen，当我问我是否可以用一个编码版本而不是图像替换你的关闭按钮时，他让我向她展示它会是什么样子。

<ul>
<li class="ele">
<div class="x large"><b></b><b></b><b></b><b></b></div>
<div class="x spin large"><b></b><b></b><b></b><b></b></div>
<div class="x spin large slow"><b></b><b></b><b></b><b></b></div>
<div class="x flop large"><b></b><b></b><b></b><b></b></div>
<div class="x t large"><b></b><b></b><b></b><b></b></div>
<div class="x shift large"><b></b><b></b><b></b><b></b></div>
</li>
<li class="ele">
<div class="x medium"><b></b><b></b><b></b><b></b></div>
<div class="x spin medium"><b></b><b></b><b></b><b></b></div>
<div class="x spin medium slow"><b></b><b></b><b></b><b></b></div>
<div class="x flop medium"><b></b><b></b><b></b><b></b></div>
<div class="x t medium"><b></b><b></b><b></b><b></b></div>
<div class="x shift medium"><b></b><b></b><b></b><b></b></div>


</li>
<li class="ele">
<div class="x small"><b></b><b></b><b></b><b></b></div>
<div class="x spin small"><b></b><b></b><b></b><b></b></div>
<div class="x spin small slow"><b></b><b></b><b></b><b></b></div>
<div class="x flop small"><b></b><b></b><b></b><b></b></div>
<div class="x t small"><b></b><b></b><b></b><b></b></div>
<div class="x shift small"><b></b><b></b><b></b><b></b></div>
<div class="x small grow"><b></b><b></b><b></b><b></b></div>


</li>
<li class="ele">
<div class="x switch"><b></b><b></b><b></b><b></b></div>
</li>
</ul>

小开

×和font-family: Garamond, "Apple Garamond";就足够了。Garamond字体很薄，网络安全

适当关闭X

小开

这是为那些想要使他们的X小/大和红色的人!

HTML:

<div class="col-sm-2"> <span><div class="red-x">&#10006;</div></span>
<p>close</p>
</div>


<div class="red-x big-x">&#10006;</div>

CSS:

.red-x {
color: red;
}


.big-x {
font-size: 70px;
text-align: center;
}

小开

& # 10005;是另一种不太厚的美味。HTML代码是✕，或十六进制的2715。

小开

这可能是迂迂的，但到目前为止，还没有人真正给出一个解决方案“只使用CSS创建一个关闭按钮。”给你:

#close:before {
content: "✖";
border: 1px solid gray;
background-color:#eee;
padding:0.5em;
cursor: pointer;
}

< a href = " http://codepen。io /不久/钢笔/ VaWqYg noreferrer“rel = > http://codepen.io/anon/pen/VaWqYg < / >

小开

这里还有一个没有提到的-很薄-如果你的项目需要这样的外观:╳

&#x2573; or decimal: &#9587;

小开

您可以通过将文本放置在以可访问方式隐藏的跨度中来使用仅供屏幕阅读器访问的文本。把x放在屏幕阅读器无法读取的CSS中，这样就不会混淆，但在页面上是可见的，键盘用户也可以访问。

<style>
.hidden {opacity:0; position:absolute; width:0;}
.close {padding:4px 8px; border:1px solid #000; background-color:#fff; cursor:pointer;}
.close:before {content:'\00d7'; color:red; font-size:2em;}
</style>


<button class="close"><span class="hidden">close</span></button>

小开

超文本标记语言

✕ ✓
. x 9 ✖✔✔

✗
✘✘ < / p >

× __abc0 __abc1

CSS

在:before或:after伪元素中，使用转义的\ Unicode HEX值，如下所示:

[class^="ico-"], [class*=" ico-"]{
font: normal 1em/1 Arial, sans-serif;
display: inline-block;
}


.ico-times:before{ content: "\2716"; }
.ico-check:before{ content: "\2714"; }

<i class="ico-times" role="img" aria-label="Cancel"></i>
<i class="ico-check" role="img" aria-label="Accept"></i>

用例:

超文本标记语言: ✕
CSS '\2715'类似于i.e.: .clear:before { content: '\2715'; }
JavaScript '\u2715'

https://home.unicode.org/

小开

使用现代浏览器，你可以旋转一个+号:

.popupClose:before {
content:'+';
}
.popupClose {
position:relative;
float:right;
right:10px;
top:0px;
padding:2px;
cursor:pointer;
margin:2px;
color:grey;
font-size:32pt;
transform:rotate(45deg);
}

然后简单地把下面的HTML放在你需要的地方:

 <span class='popupClose'></span>

小开

×比✖更好，因为✖在Edge和Internet explorer中表现奇怪(在IE11中测试)。它没有得到正确的颜色，并被一个“表情符号”所取代

小开

&#x274C;

看起来像:

❌

这对我有好处:)

小开

🗙- 2021年更新

截至Unicode 7.0(2014年6月):取消X"

小开

以防万一，有人正在搜索正确和错误的标记:

char rightMark = '\u2713';
char wrongMark = '\u2717';

将打印:

✓ Right Mark
✗ Wrong Mark

Unicode字符"X"取消/关闭?

用例:

🗙- 2021年更新