我想只使用CSS创建一个关闭按钮。
我相信我不是第一个这样做的人,所以有人知道哪种字体的“x”宽与高相同,这样它就可以跨浏览器使用,看起来像一个关闭按钮吗?
我想只使用CSS创建一个关闭按钮。
我相信我不是第一个这样做的人,所以有人知道哪种字体的“x”宽与高相同,这样它就可以跨浏览器使用,看起来像一个关闭按钮吗?
当前回答
❌
看起来像:
❌
这对我有好处:)
其他回答
如果使用×-mark(乘法符号),×在HTML中,为了那个?
“x”(字母)不能用来表示字母x以外的任何东西。
还有一个没有在这里提到-很薄-如果你的项目需要这样的外观:╳
╳ or decimal: ╳
报;比✖& # 10006;在Edge和Internet explorer(在IE11中测试)中表现异常。它没有得到正确的颜色,并被一个“表情符号”所取代
HTML
✕ ✕ ✓ ✓ ✖ ✖ ✔ ✔
✗ ✗ ✘ ✘
× × ×
CSS
在::before或::after伪元素中使用转义的\ Unicode HEX值,如下所示:
[class^="ico-"], [class*=" ico-"] { 字体:normal 1em/1 Arial, sans-serif; 显示:inline-block; } .ico-times::before{内容:"\2716";} .ico-check::before{内容:"\2714";} <i class="ico-times" role="img" aria-label="Cancel"></i> . <i class="ico-check" role="img" aria-label="Accept"></i> .
用例:
Language | Syntax | Example |
---|---|---|
HTML | ✕ | <button class="close" type="button">✕ Close</button> |
CSS | \2715 | .close::before { content: '\2715'; } |
JavaScript | \u2715 | document.querySelector(".close").prepend("\u2715") |
https://home.unicode.org/
这对我来说很管用:
<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>