我想只使用CSS创建一个关闭按钮。

我相信我不是第一个这样做的人,所以有人知道哪种字体的“x”宽与高相同,这样它就可以跨浏览器使用,看起来像一个关闭按钮吗?


当前回答

您可以通过将文本放置在以可访问方式隐藏的跨度中来使用仅供屏幕阅读器访问的文本。把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>

其他回答

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

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

将打印:

✓ Right Mark
✗ Wrong Mark

正如@Haza指出的,可以使用时间符号。Twitter Bootstrap将此映射为一个关闭图标,用于解散情态动词和提醒等内容。

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

如果使用×-mark(乘法符号),&times;在HTML中,为了那个?

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

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

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

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

小提琴在这里

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

&#x2573; or decimal: &#9587;