Caractère Unicode pour «X» annuler / fermer?


219

Je veux créer un bouton de fermeture en utilisant uniquement CSS.

Je suis sûr que je ne suis pas le premier à le faire, alors quelqu'un sait-il quelle police a un «x» de la même largeur que la hauteur, de sorte qu'elle peut être utilisée dans plusieurs navigateurs pour ressembler à un bouton de fermeture?

Réponses:


510

✖ fonctionne vraiment bien. Le code HTML est ✖.


6
Notez que vous devez utiliser une police qui prend en charge ce caractère. Je pense que DejaVu a l'air bien pour ça. Je pense Lucida Sans Unicodeet Arial Unicode MSsupporte également ces symboles Unicode. Si vous n'utilisez pas une police qui prend en charge ces caractères sur certains navigateurs (en particulier les anciens IE), vous obtiendrez uniquement des rectangles indiquant des symboles non pris en charge. J'utilise une version allégée de DejaVu pour de tels symboles.
panzi

6
Il s'appelle 'Heavy Multiplication X' je crois - fileformat.info/info/unicode/char/2716/index.htm
eipark

8
2 ans plus tard, ce commentaire vient de donner un coup de pied à mon projet cette quantité supplémentaire de cul que je cherchais!
NominalAeon

1
Maintenant, si seulement nous pouvions changer la couleur dans FireFox 32.0, c'est toujours rouge même lors du réglage de la couleur css
Gerrit Brink

5
Une autre option (plus attrayante de l'OMI) est & # x2715;
Andrew Hendrie

75

Qu'en est-il de l'utilisation du × -mark (le symbole de multiplication), ×en HTML, pour cela?

"x" (lettre) ne doit pas être utilisé pour représenter autre chose que la lettre X.


14
En suivant votre logique - les x-temps ne devraient également représenter que x fois. Je dirais soit utiliser une image ou le mot fermer.
easwee

1
Ouaip, c'est aussi vrai, je sais.
Haza

9
"x" (lettre) ne doit pas être utilisé pour représenter autre chose que la lettre X. - qui dit ça? si c'est juste vous quelle est la logique derrière cela. merci
Valentin Kuzub

1
Vous pouvez également utiliser le caractère de multiplication «×». Tiré de cette question .
Kamil Sarna

1
Meilleure réponse à mon humble avis. Je pense que tous les navigateurs le prendront en charge et si Bootstrap l'utilise ... ils suivent généralement les meilleures pratiques.
Rui Marques

62

× ×ou ×(même chose) signe de multiplication U + 00D7

× même caractère avec un fort poids de police


⨯Produit Gibbs U + 2A2F


✖Signe multiplicateur lourd U + 2716


Il y a aussi un emoji ❌ si vous le supportez. Si vous ne le faites pas, vous venez de voir un carré =❌


J'ai également fait cet exemple de code simple sur Codepen lorsque je travaillais avec un designer qui m'a demandé de lui montrer à quoi cela ressemblerait lorsque je lui ai demandé si je pouvais remplacer votre bouton de fermeture par une version codée plutôt qu'une image.

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

41

HTML

&#x2715;&#x2713;
&#x2716;&#x2714;

&#x2717;
&#x2718;

× &#x00d7; &times;

CSS

Si vous souhaitez utiliser les caractères ci-dessus à partir de CSS (comme par exemple: dans un :beforeou :afterpseudo), utilisez simplement la \valeur Unicode HEX échappée , comme par exemple:

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

Utilisez des exemples pour différentes langues :

  • &#x2715; HTML
  • '\2715' CSS comme ie:.clear:before { content: '\2715'; }
  • '\u2715' Chaîne JavaScript

22

✕ est un autre grand qui n'est pas trop épais. Le code HTML est &#10005;, ou 2715en hexadécimal.


19

Comme l'a souligné @Haza, le symbole de l'heure peut être utilisé. Twitter Bootstrap associe cela à une icône de fermeture pour rejeter le contenu comme les modaux et les alertes.

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

2
Informatif en pointant que Bootstrap l'utilise mais c'est une réponse dupliquée, c'est la même que celle de @Haza.
Rui Marques


5

Il s'agit probablement de pédanterie, mais jusqu'à présent, personne n'a vraiment donné de solution "pour créer un bouton de fermeture en utilisant uniquement CSS". seulement. Voici:

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

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


5

il y en a un autre non mentionné ici - joli mince - si vous avez besoin de ce genre de look pour votre projet: ╳

&#x2573; or decimal: &#9587;

4

&times;et le font-family: Garamond, "Apple Garamond";rendre assez bon. La police Garamond est fine et sécurisée pour le Web

bonne fermeture X


3

Cela fonctionne bien pour moi:

<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

Oubliez une police et utilisez une image d'arrière-plan!

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

Ce sera plus accessible pour les utilisateurs visitant la page avec un lecteur d'écran.


2

C'est pour les gens qui veulent faire leur Xpetit / grand et rouge!

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

Vous pouvez utiliser du texte accessible uniquement aux lecteurs d'écran en le plaçant dans une plage que vous masquez de manière accessible. Placez le x dans le CSS qui ne peut pas être lu par les lecteurs d'écran, donc ne confondra pas, mais est visible sur la page, et également accessible par les utilisateurs du clavier.

<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

En utilisant des navigateurs modernes, vous pouvez faire pivoter un signe +:

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

puis placez simplement le code HTML suivant là où vous en avez besoin:

 <span class='popupClose'></span>

Ou vous pouvez utiliser <i class = 'material-icons'> close </i> (avec un <head> <link href = " fonts.googleapis.com/icon?family=Material+Icons " rel = "stylesheet"> )
user1432181

1

&times;est mieux que &#10006;comme &#10006;se comporte étrangement dans Edge et Internet Explorer (testé dans IE11). Il n'a pas la bonne couleur et est remplacé par un "emoji"

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.