Какой шрифт для CSS кнопки «x» закрыть? - PullRequest
Новая
       53

Какой шрифт для CSS кнопки «x» закрыть?

204 голосов
/ 18 марта 2011

Я хочу создать кнопку закрытия, используя только CSS.

Я уверен, что я не первый, кто делает это, поэтому кто-нибудь знает, какой шрифт имеет 'x' такой же ширины, как высота, так что его можно использовать кросс-браузер, чтобы выглядеть как кнопка закрытия?

Ответы [ 16 ]

3 голосов
/ 22 июля 2012

Это хорошо работает для меня: 

<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();'>&#10006;</a>
    Click "X" to close this box
</div>
2 голосов
/ 17 ноября 2015

Это для людей, которые хотят сделать свои X маленькие / большие и красные!

HTML: 

<div class="col-sm-2"> <span><div class="red-x">&#10006;</div></span>
    <p>close</p>
</div>

<div class="red-x big-x">&#10006;</div>

CSS: 

.red-x {
color: red;
}

.big-x {
font-size: 70px;
text-align: center;
}
2 голосов
/ 18 марта 2011

Забудьте о шрифте и используйте фоновое изображение! 

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

Это будет более доступно для пользователей, посещающих страницу с помощью программы чтения с экрана.

1 голос
/ 11 сентября 2017

Используя современные браузеры, вы можете повернуть знак +: 

.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>
1 голос
/ 22 апреля 2017

Вы можете использовать текст, который доступен только для программ чтения с экрана, поместив его в промежуток, который вы скрываете доступным способом. Поместите х в 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>
0 голосов
/ 30 апреля 2019

&times; лучше, чем &#10006;, так как &#10006; ведет себя странно в Edge и Internet Explorer (протестировано в IE11). Он не получает нужный цвет и заменяется на «эмодзи»

Страница:
...