我想只使用CSS创建一个关闭按钮。
我相信我不是第一个这样做的人，所以有人知道哪种字体的“x”宽与高相同，这样它就可以跨浏览器使用，看起来像一个关闭按钮吗?
当前回答
×& # 215;或者报;U+00D7的乘法号
×相同字符，字体粗细较强
⨯& # 10799;U+2A2F吉布斯积
✖& # 10006;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>
其他回答
忘记字体，使用背景图像!
<!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>
对于使用屏幕阅读器访问页面的用户来说，这将更容易访问。
这是为那些想让他们的X小/大和红色的人准备的!
HTML:
<div class="col-sm-2"> <span><div class="red-x">✖</div></span>
<p>close</p>
</div>
<div class="red-x big-x">✖</div>
CSS:
.red-x {
color: red;
}
.big-x {
font-size: 70px;
text-align: center;
}
❌
看起来像:
❌
这对我有好处:)
使用现代浏览器，你可以旋转一个+号:
.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>
控制自己真的很有效。HTML代码是✖
另一种选择是✕:
