我想只使用CSS创建一个关闭按钮。
我相信我不是第一个这样做的人,所以有人知道哪种字体的“x”宽与高相同,这样它就可以跨浏览器使用,看起来像一个关闭按钮吗?
我想只使用CSS创建一个关闭按钮。
我相信我不是第一个这样做的人,所以有人知道哪种字体的“x”宽与高相同,这样它就可以跨浏览器使用,看起来像一个关闭按钮吗?
当前回答
控制自己真的很有效。HTML代码是✖
另一种选择是✕:
其他回答
您可以通过将文本放置在以可访问方式隐藏的跨度中来使用仅供屏幕阅读器访问的文本。把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>
报;and font-family: Garamond,“苹果Garamond”;让它足够好。Garamond字体很薄,网络安全
使用现代浏览器,你可以旋转一个+号:
.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>
这是为那些想让他们的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;
}
如果使用×-mark(乘法符号),×在HTML中,为了那个?
“x”(字母)不能用来表示字母x以外的任何东西。