formulario - ¿Qué fuente para el botón de cerrar "x" de CSS?

estilos contact form (15)

¡Olvídate de una fuente y usa una imagen de fondo!

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

Esto será más accesible para los usuarios que visiten la página con un lector de pantalla.

Quiero crear un botón de cierre usando solo CSS.

Estoy seguro de que no soy el primero en hacer esto. ¿Alguien sabe qué fuente tiene una ''x'' del mismo ancho que alto, de modo que se pueda usar el navegador cruzado para parecerse a un botón de cierre?

¿Qué hay de usar la marca × (el símbolo de multiplicación), × en HTML, para eso?

"x" (letra) no debe usarse para representar otra cosa que no sea la letra X.

× × o × (lo mismo) U + 00D7 signo de multiplicación

× mismo personaje con un peso de fuente fuerte

⨯ ⨯ U + 2A2F producto de Gibbs

✖ ✖ U + 2716 signo de multiplicación pesada

También hay un emoji ❌ si lo apoyas. Si no, simplemente viste un cuadrado = ❌

También hice este sencillo ejemplo de código en Codepen cuando trabajaba con un diseñador que me pidió que le mostrara cómo se vería cuando le preguntara si podía reemplazar su botón de cierre con una versión codificada en lugar de una imagen.

Aquí también hay algunos útiles.

HTML

✕ ✕ ✓ ✓
✖ ✖ ✔ ✔

✗ ✗
✘ ✘

× × ×

CSS

Si desea usar los caracteres anteriores de CSS (como por ejemplo: en un :before o :after pseudo) simplemente use el valor Unicode HEX como por ejemplo:

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

Como señaló @Haza se puede utilizar el símbolo de los tiempos. Twitter Bootstrap lo asigna a un ícono cerrado para descartar contenido como modales y alertas.

<button class="close">×</button>

Esto funciona muy bien para mí:

<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();''>✖</a> Click "X" to close this box </div>

Prefiero Font Awesome: http://fortawesome.github.io/Font-Awesome/icons/

El icono que estarías buscando es fa-times . Es tan simple como esto para usar:

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

Violín aquí

Probablemente sea pedantería, pero hasta ahora nadie realmente ha dado una solución "para crear un botón de cierre utilizando solo CSS". solamente. Aqui tienes:

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

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

Puede usar texto al que solo pueden acceder los lectores de pantalla colocándolo en un espacio que oculte de manera accesible. Coloque la x en el CSS, que los lectores de pantalla no pueden leer, por lo que no se confundirán, pero se podrán ver en la página y los usuarios del teclado también podrán acceder a ellos.

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

Usando navegadores modernos puedes rotar un signo +:

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

simplemente coloque el siguiente html donde lo necesite:

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

hay otro que no se menciona aquí, bonito, si necesita ese tipo de aspecto para su proyecto:

╳ or decimal: ╳

✕ es otro grande que no es demasiado grueso. El código HTML es ✕ , o 2715 en hexadecimal.

× y font-family: Garamond, "Apple Garamond"; que sea lo suficientemente bueno La fuente de Garamond es delgada y segura para la web

¡Esto es para las personas que quieren hacer sus X pequeñas / grandes y rojas!

HTML:

<div class="col-sm-2"> <span><div class="red-x">✖</div></span> <p>close</p> </div> <div class="red-x big-x">✖</div>

CSS:

.red-x { color: red; } .big-x { font-size: 70px; text-align: center; }

✖ funciona muy bien El código HTML es ✖ .