我想只使用CSS创建一个关闭按钮。
我相信我不是第一个这样做的人，所以有人知道哪种字体的“x”宽与高相同，这样它就可以跨浏览器使用，看起来像一个关闭按钮吗?
当前回答
报;比✖& # 10006;在Edge和Internet explorer(在IE11中测试)中表现异常。它没有得到正确的颜色，并被一个“表情符号”所取代
其他回答
这对我来说很管用:
<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();'>✖</a>
Click "X" to close this box
</div>
这可能是迂迂的，但到目前为止，还没有人真正给出一个解决方案“只使用CSS创建一个关闭按钮。”给你:
#close:before {
content: "✖";
border: 1px solid gray;
background-color:#eee;
padding:0.5em;
cursor: pointer;
}
http://codepen.io/anon/pen/VaWqYg
我更喜欢字体很棒:http://fortawesome.github.io/Font-Awesome/icons/
你要找的图标是fa-times。使用起来很简单:
<button><i class="fa fa-times"></i> Close</button>
小提琴在这里
报;比✖& # 10006;在Edge和Internet explorer(在IE11中测试)中表现异常。它没有得到正确的颜色，并被一个“表情符号”所取代
控制自己真的很有效。HTML代码是✖
另一种选择是✕:
