Carattere Unicode per "X" annullare / chiudere?


219

Voglio creare un pulsante di chiusura usando solo CSS.

Sono sicuro di non essere il primo a farlo, quindi qualcuno sa quale carattere ha una "x" della stessa larghezza dell'altezza, in modo che possa essere utilizzato su più browser per sembrare un pulsante di chiusura?

Risposte:


510

✖ funziona davvero bene. Il codice HTML è ✖.


6
Nota che devi usare un carattere che supporti questo personaggio. Penso che DejaVu sia carino per questo. Penso Lucida Sans Unicodee Arial Unicode MSsostengo anche tali simboli unicode. Se non utilizzi un carattere che supporti questi caratteri su alcuni browser (in particolare IE precedente), otterrai solo rettangoli che indicano simboli non supportati. Uso una versione ridotta di DejaVu per tali simboli.
Panzi,

6
Si chiama "Moltiplicazione pesante X" credo - fileformat.info/info/unicode/char/2716/index.htm
eipark

8
2 anni dopo, questo commento ha appena fatto esplodere il mio progetto con quel culo in più che stavo cercando!
Nominal Airone

1
Ora, se solo potessimo cambiare il colore in FireFox 32.0, è sempre rosso anche quando si imposta il colore css
Gerrit Brink

5
Un'altra opzione (più attraente IMO) è & # x2715;
Andrew Hendrie,

75

Che ne dici di usare il segno x (il simbolo della moltiplicazione), ×in HTML, per questo?

"x" (lettera) non deve essere usato per rappresentare nient'altro che la lettera X.


14
Seguendo la tua logica, anche x-times dovrebbe rappresentare solo x volte. Direi che usare un'immagine o chiudere la parola.
Easwee,

1
Sì, anche questo è vero, lo so.
Haza,

9
"x" (lettera) non deve essere usato per rappresentare nient'altro che la lettera X. - chi lo dice? se questo è solo tu qual è la logica dietro questo. grazie
Valentin Kuzub il

1
Puoi anche usare il carattere di moltiplicazione '×'. Tratto da questa domanda .
Kamil Sarna,

1
Migliore risposta IMHO. Penso che tutti i browser supporteranno questo e se Bootstrap lo sta usando ... di solito seguono le migliori pratiche.
Rui Marques,

62

× ×o ×(stessa cosa) segno di moltiplicazione U + 00D7

× stesso personaggio con un forte peso del carattere


⨯ Prodotto ⨯U + 2A2F Gibbs


✖U + 2716 segno di moltiplicazione pesante


C'è anche un'emoji ❌ se la supporti. Altrimenti hai appena visto un quadrato =❌


Ho anche fatto questo semplice esempio di codice su Codepen quando stavo lavorando con un designer che mi ha chiesto di mostrarle come sarebbe stato quando le avrei chiesto di sostituire il tuo pulsante di chiusura con una versione codificata anziché un'immagine.

<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

Se vuoi usare i suddetti caratteri da CSS (come ad es .: in an :beforeo :afterpseudo) usa semplicemente il \valore HEX Unicode con escape , come ad esempio:

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

Usa esempi per diverse lingue :

  • &#x2715; HTML
  • '\2715' CSS come ie:.clear:before { content: '\2715'; }
  • '\u2715' Stringa JavaScript

22

✕ è un altro grande che non è troppo spesso. Il codice HTML è &#10005;, o 2715in esadecimale.




5

Questo è probabilmente pedanteria, ma finora nessuno ha davvero dato una soluzione "per creare un pulsante di chiusura usando solo CSS". solo. Ecco qui:

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

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


5

ce n'è un altro non menzionato qui - carino - se hai bisogno di quel tipo di look per il tuo progetto: ╳

&#x2573; or decimal: &#9587;

4

&times;e font-family: Garamond, "Apple Garamond";renderlo abbastanza buono. Il carattere Garamond è sottile e sicuro per il web

corretta chiusura X


3

Questo funziona bene per me:

<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

Dimentica un font e usa un'immagine di sfondo!

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

Questo sarà più accessibile per gli utenti che visitano la pagina con uno screen reader.


2

Questo è per le persone che vogliono rendere il loro Xpiccolo / grande e rosso!

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

Puoi usare il testo accessibile solo agli screen reader posizionandolo in un arco che nascondi in un modo accessibile. Posiziona la x nel CSS che non può essere letta dagli screen reader, quindi non confondere, ma è visibile sulla pagina e accessibile anche dagli utenti della tastiera.

<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

Utilizzando i browser moderni puoi ruotare un segno +:

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

quindi basta posizionare il seguente codice HTML dove è necessario:

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

Oppure potresti usare <i class = 'material-icons'> chiudi </i> (con un <head> <link href = " fonts.googleapis.com/icon?family=Material+Icons " rel = "stylesheet"> )
user1432181

1

&times;è meglio di &#10006;come &#10006;si comporta in modo strano in Edge e Internet Explorer (testato in Internet Explorer 11). Non ottiene il colore giusto ed è sostituito da una "emoji"

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.