Karakter Unicode untuk "X" batal / tutup?


219

Saya ingin membuat tombol tutup hanya menggunakan CSS.

Saya yakin saya bukan yang pertama melakukan ini, jadi apakah ada yang tahu font mana yang memiliki 'x' dengan lebar yang sama dengan tinggi, sehingga dapat digunakan lintas browser agar terlihat seperti tombol tutup?

Jawaban:


510

✖ bekerja dengan sangat baik. Kode HTML adalah ✖.


6
Perhatikan bahwa Anda harus menggunakan font yang mendukung karakter ini. Saya pikir DejaVu terlihat bagus untuk itu. Saya pikir Lucida Sans Unicodedan Arial Unicode MSjuga mendukung simbol unicode tersebut. Jika Anda tidak menggunakan font yang mendukung karakter ini di beberapa browser (terutama IE lama), Anda akan mendapatkan persegi panjang yang menunjukkan simbol yang tidak didukung. Saya menggunakan versi DejaVu yang dilucuti untuk simbol seperti itu.
panzi

6
Itu disebut 'Multiplikasi Berat X' Saya percaya - fileformat.info/info/unicode/char/2716/index.htm
eipark

8
2 tahun kemudian, komentar ini hanya membuat proyek saya menendang pantat ekstra yang saya cari!
NominalAeon

1
Sekarang seandainya kita bisa mengubah warna di FireFox 32.0, selalu merah bahkan ketika mengatur warna css
Gerrit Brink

5
Opsi lain (IMO lebih menarik) adalah & # x2715;
Andrew Hendrie

75

Bagaimana dengan menggunakan tanda-x (simbol multiplikasi), × dalam HTML, untuk itu?

"x" (huruf) tidak boleh digunakan untuk mewakili hal lain selain huruf X.


14
Pergi dengan logika Anda - juga x-kali harus mewakili hanya x kali. Saya akan mengatakan baik menggunakan gambar atau kata tutup.
easwee

1
Yup, ini juga benar, saya tahu.
Haza

9
"x" (huruf) tidak boleh digunakan untuk mewakili apa pun selain huruf X. - siapa yang mengatakan itu? jika itu hanya Anda apa logika di balik itu. terima kasih
Valentin Kuzub

1
Anda juga dapat menggunakan karakter perkalian '×'. Diambil dari pertanyaan ini .
Kamil Sarna

1
IMHO jawaban terbaik. Saya pikir semua browser akan mendukung ini dan jika Bootstrap menggunakannya ... mereka biasanya mengikuti praktik terbaik.
Rui Marques

62

× ×atau ×(hal yang sama) tanda multiplikasi U + 00D7

× karakter yang sama dengan bobot font yang kuat


⨯produk Gibbs U + 2A2F


✖U + 2716 tanda multiplikasi berat


Ada juga emoji ❌ jika Anda mendukungnya. Jika tidak, Anda hanya melihat kotak =❌


Saya juga membuat contoh kode sederhana ini pada Codepen ketika saya bekerja dengan seorang desainer yang meminta saya untuk menunjukkan padanya seperti apa bentuknya ketika saya bertanya apakah saya bisa mengganti tombol tutup Anda dengan versi kode daripada gambar.

<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

Jika Anda ingin menggunakan karakter di atas dari CSS (seperti misalnya: dalam :beforeatau :afterpseudo) cukup gunakan nilai \Unicode HEX kabur , seperti misalnya:

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

Gunakan contoh untuk berbagai bahasa :

  • &#x2715; HTML
  • '\2715' CSS seperti:.clear:before { content: '\2715'; }
  • '\u2715' String JavaScript

22

✕ adalah salah satu yang bagus yang tidak terlalu tebal. Kode HTML adalah &#10005;, atau 2715dalam hex.


19

Seperti @Haza tunjukkan simbol waktu dapat digunakan. Twitter Bootstrap memetakan ini ke ikon tutup untuk mengabaikan konten seperti modals dan peringatan.

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

2
Informatif dengan menunjukkan bahwa Bootstrap menggunakan ini tetapi ini adalah jawaban yang digandakan, sama dengan @Haza.
Rui Marques


5

Ini mungkin kesedihan, tetapi sejauh ini tidak ada yang benar-benar memberikan solusi "untuk membuat tombol tutup hanya menggunakan CSS." hanya. Ini dia:

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

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


5

ada satu lagi yang tidak disebutkan di sini - kurus bagus - jika Anda memerlukan jenis mencari proyek Anda: ╳

&#x2573; or decimal: &#9587;

4

&times;dan font-family: Garamond, "Apple Garamond";membuatnya cukup baik. Font Garamond tipis dan aman untuk web

tutup yang tepat X


3

Ini bekerja dengan baik untuk saya:

<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

Lupakan font dan gunakan gambar latar belakang!

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

Ini akan lebih mudah diakses oleh pengguna yang mengunjungi halaman dengan pembaca layar.


2

Ini untuk orang yang ingin membuat Xkecil / besar dan merah!

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

Anda dapat menggunakan teks yang hanya dapat diakses oleh pembaca layar dengan menempatkannya dalam rentang yang Anda sembunyikan dengan cara yang dapat diakses. Tempatkan x di CSS yang tidak dapat dibaca oleh pembaca layar, sehingga tidak akan membingungkan, tetapi terlihat pada halaman, dan juga dapat diakses oleh pengguna keyboard.

<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

Menggunakan browser modern, Anda dapat memutar tanda +:

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

maka cukup letakkan html berikut di tempat yang Anda butuhkan:

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

Atau Anda bisa menggunakan <i class = 'material-icons'> close </i> (dengan <head> <tautan href = " fonts.googleapis.com/icon?family=Material+Icons " rel = "stylesheet"> )
user1432181

1

&times;lebih baik dari &#10006;yang &#10006;berperilaku aneh di Ujung dan Internet explorer (diuji dalam IE11). Itu tidak mendapatkan warna yang tepat dan digantikan oleh "emoji"

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.