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

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


当前回答

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

另一种选择是&#x2715:

其他回答

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

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

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

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

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

小提琴在这里

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

<!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>

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

报;比&#10006;& # 10006;在Edge和Internet explorer(在IE11中测试)中表现异常。它没有得到正确的颜色,并被一个“表情符号”所取代

是另一个不太厚的好选项。HTML代码是&#10005;,或者十六进制的2715。