อักขระ Unicode สำหรับ“ X” ยกเลิก / ปิด

ฉันต้องการสร้างปุ่มปิดโดยใช้ CSS เท่านั้น

ฉันแน่ใจว่าฉันไม่ใช่คนแรกที่ทำสิ่งนี้ดังนั้นไม่มีใครรู้ว่าแบบอักษรใดที่มีความกว้างเท่ากับความสูง 'x' เพื่อให้สามารถใช้ cross-browser เพื่อดูเหมือนปุ่มปิดได้

✖ทำงานได้ดีจริงๆ โค้ด HTML ✖คือ

สิ่งที่เกี่ยวกับการใช้เครื่องหมาย× (เครื่องหมายการคูณ) ×ในรูปแบบ HTML สำหรับสิ่งนั้น

"x" (ตัวอักษร) ไม่ควรใช้เพื่อแสดงถึงสิ่งอื่นใดนอกจากตัวอักษร X

× ×หรือ×(สิ่งเดียวกัน) เครื่องหมายการคูณ U + 00D7

×ลักษณะเดียวกันที่มีน้ำหนักตัวอักษรที่แข็งแกร่ง

⨯ผลิตภัณฑ์⨯U + 2A2F Gibbs

sign ✖U + 2716 เครื่องหมายคูณหนัก

นอกจากนี้ยังมีอีโมจิถ้าคุณสนับสนุนมัน ถ้าคุณไม่ทำคุณเห็นจตุรัส =❌

ฉันยังทำตัวอย่างรหัสง่ายๆนี้ใน Codepenเมื่อฉันทำงานกับนักออกแบบที่ขอให้ฉันแสดงให้เธอเห็นว่ามันจะเป็นอย่างไรเมื่อฉันถามว่าฉันสามารถแทนที่ปุ่มปิดของคุณด้วยเวอร์ชันที่ใช้รหัสแทนรูปภาพได้หรือไม่

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

HTML

✕ ✕ ✓ ✓
✖ ✖ ✔ ✔

✗ ✗
✘✘

× × ×

CSS

หากคุณต้องการใช้ตัวอักษรด้านบนจาก CSS (เช่น ie: in :beforeor :afterpseudo) เพียงใช้ค่า\Unicode HEX ที่มีการหลีกเลี่ยงเช่น:

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

ใช้ตัวอย่างสำหรับภาษาต่างๆ :

• ✕ HTML
• '\2715' CSSเช่น ie:.clear:before { content: '\2715'; }
• '\u2715' สตริงJavaScript

✕เป็นอีกหนึ่งสิ่งที่ยอดเยี่ยมที่ไม่หนาเกินไป รหัส HTML คือ✕หรือ2715เลขฐานสิบหก

ในฐานะที่ @Haza ชี้ให้เห็นสัญลักษณ์เวลาที่สามารถใช้ Twitter Bootstrapจับคู่สิ่งนี้กับไอคอนปิดเพื่อปิดเนื้อหาเช่นโมดัลและการเตือน

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

ฉันชอบ Font Awesome: http://fortawesome.github.io/Font-Awesome/icons/

fa-timesไอคอนที่คุณจะได้รับการมองหา มันง่ายอย่างที่จะใช้:

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

เล่นซอที่นี่

นี่อาจเป็นคนอวดรู้ แต่จนถึงขณะนี้ยังไม่มีใครได้แก้ปัญหาจริงๆ "เพื่อสร้างปุ่มปิดโดยใช้ CSS เท่านั้น" เท่านั้น ไปเลย:

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

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

มีอีกอย่างที่ไม่ได้กล่าวถึงที่นี่ - ผอมดี - ถ้าคุณต้องการมองหาโครงการของคุณ: ╳

╳ or decimal: ╳

×และfont-family: Garamond, "Apple Garamond";ทำให้ดีพอ แบบอักษร Garamond มีความบางและปลอดภัยสำหรับเว็บ

มันใช้งานได้ดีสำหรับฉัน:

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

ลืมแบบอักษรและใช้ภาพพื้นหลัง!

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

สิ่งนี้จะเข้าถึงได้มากขึ้นสำหรับผู้ใช้ที่เข้าชมหน้าด้วยโปรแกรมอ่านหน้าจอ

นี่สำหรับคนที่ต้องการทำตัว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;
}

คุณสามารถใช้ข้อความที่เข้าถึงได้โดยโปรแกรมอ่านหน้าจอเท่านั้นโดยวางไว้ในช่วงที่คุณซ่อนในทางที่เข้าถึงได้ วาง x ลงใน 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>

การใช้เบราว์เซอร์สมัยใหม่คุณสามารถหมุนเครื่องหมาย + ได้:

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

×ดีกว่า✖เป็น✖พฤติกรรมแปลกในขอบและ Internet Explorer (ทดสอบใน IE11) มันไม่ได้สีที่ถูกต้องและถูกแทนที่ด้วย "อิโมจิ"