Która czcionka dla przycisku zamykania CSS "x"?

Chcę utworzyć przycisk zamykania tylko przy użyciu CSS.

Jestem pewien, że nie jestem pierwszym, który to robi, więc czy ktoś wie, która czcionka ma "x" taką samą szerokość jak wysokość, aby mogła być używana w przeglądarce, aby wyglądać jak przycisk zamykania?

Author: hopper, 2011-03-18
Source

15 answers

✖ działa naprawdę dobrze. Kod HTML to ✖.

 464
Author: eipark,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-02-11 16:34:03

A co z użyciem znaku ×(symbolu mnożenia), × W HTML?

"x" (litera) nie powinno być używane do reprezentowania niczego innego niż litera X.

 71
Author: Haza,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-02-08 05:03:01

× × lub × (to samo) znak mnożenia U + 00D7

× ten sam znak z mocną czcionką

⨯ ⨯ u + 2a2f iloczyn Gibbsa

✖ ✖ u + 2716 ciężki znak mnożenia

Jest też emoji, jeśli go wspierasz. If you don ' t you just saw a square = ❌

Zrobiłem również Ten prosty przykład kodu na Codepen kiedy pracowałem z projektantem, który poprosił mnie o pokazanie jej, jak będzie wyglądał jak wtedy, gdy zapytałem, Czy mogę zastąpić twój przycisk zamykania kodowaną wersją, a nie obrazem.

<ul>
  <li class="ele">
    <div class="x large"><b></b><b></b><b></b><b></b></div>
    <div class="x spin large"><b></b><b></b><b></b><b></b></div>
    <div class="x spin large slow"><b></b><b></b><b></b><b></b></div>
    <div class="x flop large"><b></b><b></b><b></b><b></b></div>
    <div class="x t large"><b></b><b></b><b></b><b></b></div>
    <div class="x shift large"><b></b><b></b><b></b><b></b></div>
  </li>
  <li class="ele">
    <div class="x medium"><b></b><b></b><b></b><b></b></div>
    <div class="x spin medium"><b></b><b></b><b></b><b></b></div>
    <div class="x spin medium slow"><b></b><b></b><b></b><b></b></div>
    <div class="x flop medium"><b></b><b></b><b></b><b></b></div>
    <div class="x t medium"><b></b><b></b><b></b><b></b></div>
    <div class="x shift medium"><b></b><b></b><b></b><b></b></div>

  </li>
  <li class="ele">
    <div class="x small"><b></b><b></b><b></b><b></b></div>
    <div class="x spin small"><b></b><b></b><b></b><b></b></div>
    <div class="x spin small slow"><b></b><b></b><b></b><b></b></div>
    <div class="x flop small"><b></b><b></b><b></b><b></b></div>
    <div class="x t small"><b></b><b></b><b></b><b></b></div>
    <div class="x shift small"><b></b><b></b><b></b><b></b></div>
    <div class="x small grow"><b></b><b></b><b></b><b></b></div>

  </li>
  <li class="ele">
    <div class="x switch"><b></b><b></b><b></b><b></b></div>
  </li>
</ul>
 54
Author: davidcondrey,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-20 15:14:11

Oto również kilka przydatnych

HTML

✕ &#x2715; ✓ &#x2713;
✖ &#x2716; ✔ &#x2714;

✗ &#x2717;
✘ &#x2718;

× &#xd7; &times;

CSS

Jeśli chcesz użyć powyższych znaków z CSS (jak np. w pseudo :before lub :after), po prostu użyj wartości szesnastkowej Unicode, jak na przykład: 

[class^="ico-"], [class*=" ico-"]{
  font: normal 1em/1 Arial, sans-serif;
  display: inline-block;
}


.ico-times:before{ content: "\2716"; }
.ico-check:before{ content: "\2714"; }
<i class="ico-times"></i>
<i class="ico-check"></i>
 27
Author: Roko C. Buljan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-23 23:55:00

✕ jest kolejnym wielkim, który nie jest zbyt gruby. Kod HTML to &#10005;, lub 2715 W hex.

 20
Author: emlai,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-12 21:33:16

Jak zauważył @Haza, można użyć symbolu czasu. Twitter Bootstrap mapuje to na ikonę Zamknij, aby odrzucić treści, takie jak Modale i alerty.

<button class="close">&times;</button>
 19
Author: John Lehmann,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-19 16:59:08

Wolę Font Awesome: http://fortawesome.github.io/Font-Awesome/icons/

Szukana ikona To fa-times. Jest to tak proste w użyciu: 

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

Fiddle here

 6
Author: prograhammer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-04-26 22:22:17

To prawdopodobnie pedanteria, ale do tej pory nikt tak naprawdę nie podał rozwiązania " tworzenia przycisku zamykania tylko przy użyciu CSS."tylko. Proszę bardzo: 

#close:before {
  content: "✖";
  border: 1px solid gray;
  background-color:#eee;
  padding:0.5em;
  cursor: pointer;
}

Http://codepen.io/anon/pen/VaWqYg

 5
Author: Steve Bennett,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-28 12:27:29

&times; i font-family: Garamond, "Apple Garamond"; Zrób to wystarczająco dobrze. Czcionka Garamond jest cienka i bezpieczna w sieci

właściwe zamknięcie x

 4
Author: Iggy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-02-25 13:55:03

To mi ładnie działa: 

<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>
 3
Author: lubar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-07-22 19:48:23

Jest jeszcze jeden nie wymieniony tutaj-nice thin-jeśli potrzebujesz takiego wyglądu dla swojego projektu: ╳

&#x2573; or decimal: &#9587;
 3
Author: Picard,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-28 14:49:42

Zapomnij o czcionce i użyj obrazka w tle!

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

Będzie to bardziej dostępne dla użytkowników odwiedzających stronę z czytnikiem ekranu.

 2
Author: Richard JP Le Guen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-13 06:00:49

To jest dla ludzi, którzy chcą zrobić swoje X małe/duże i czerwone!

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;
}
 1
Author: JMASTER B,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-22 03:00:02

Możesz użyć tekstu, który jest dostępny tylko dla czytników ekranu, umieszczając go w zakresie, który ukrywasz w przystępny sposób. Umieść x w CSS, który nie może być odczytany przez czytniki ekranu, więc nie będzie mylony, ale jest widoczny na stronie, a także dostępny dla użytkowników klawiatury.

<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>
 1
Author: judyofthewoods,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-22 17:39:41

Przy użyciu nowoczesnych przeglądarek można obracać znak+: 

.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);
}

Następnie po prostu umieść następujący kod html tam, gdzie potrzebujesz: 

 <span class='popupClose'></span>
 1
Author: user1432181,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-11 12:41:50