CSS para ocultar el valor botón de entrada de texto

Question

Actualmente estoy Styling un elemento <input type='button'/> con el siguiente CSS:

background: transparent url(someimage); 
color: transparent; 

Quiero el botón para mostrar como una imagen, pero no quiero que el texto value para mostrar en lo alto de ello. Esto funciona bien para Firefox como se esperaba. Sin embargo, en Internet Explorer 6 e Internet Explorer 7 aún puedo ver el texto.

He intentado todo tipo de trucos para ocultar el texto, pero sin éxito. ¿Hay una solución para hacer que Internet Explorer se comporte?

(me veo obligado a utilizar type=button porque se trata de una forma Drupal y su forma API no admite tipo de imagen.)

Answer 1

¿Por qué está incluyendo el atributo value en absoluto? Desde la memoria, no es necesario que lo especifique (aunque los estándares HTML pueden decir que sí, no estoy seguro). Si necesita un atributo value, ¿por qué no simplemente declarar value=""?

Si toma este enfoque, su CSS necesitará propiedades adicionales para el alto y el ancho de la imagen de fondo.

Answer 2

¿Ha intentado establecer la propiedad de sangría de texto en algo así como -999em? Esa es una buena forma de 'esconder' el texto.

O puede establecer el tamaño de fuente en 0, que también funcionaría.

http://www.productivedreams.com/ie-not-intepreting-text-indent-on-submit-buttons/

Answer 3

que tenían el problema opuesto (trabajó en Internet Explorer, pero no en Firefox). Para Internet Explorer, necesita agregar relleno izquierdo, y para Firefox, debe agregar color transparente. Así que aquí está nuestra solución combinada para un icono del botón x 16px 16px:

input.iconButton 
{ 
    font-size: 1em; 
    color: transparent; /* Fix for Firefox */ 
    border-style: none; 
    border-width: 0; 
    padding: 0 0 0 16px !important; /* Fix for Internet Explorer */ 
    text-align: left; 
    width: 16px; 
    height: 16px; 
    line-height: 1 !important; 
    background: transparent url(../images/button.gif) no-repeat scroll 0 0; 
    overflow: hidden; 
    cursor: pointer; 
} 

Answer 4

Aplicando font-size: 0.1px; al botón funciona para mí en Firefox, Internet Explorer 6, Internet Explorer 7 y Safari. Ninguna de las otras soluciones que he encontrado funcionaba en todos los navegadores.

Answer 5

así:

font-size: 0; line-height: 0;

trabajo impresionante para mí!

Answer 6

utilizo

button {text-indent:-9999px;} 
* html button{font-size:0;display:block;line-height:0} /* ie6 */ 
*+html button{font-size:0;display:block;line-height:0} /* ie7 */ 

Answer 7

Esto funciona en Firefox 3, Internet Explorer 8, el modo de compatibilidad de Internet Explorer 8, Opera y Safari.

* Nota: la celda de tabla que contiene esto tiene padding:0 y text-align:center.

background: none; 
background-image: url(../images/image.gif); 
background-repeat:no-repeat; 
overflow:hidden; 
border: NONE; 
width: 41px; /*width of image*/ 
height: 19px; /*height of image*/ 
font-size: 0; 
padding: 0 0 0 41px; 
cursor:pointer; 

Answer 8

overflow:hidden y padding-left están trabajando muy bien para mí.

Para Firefox:

width:12px; 
height:20px; 
background-image:url(images/arrow.gif); 
color:transparent; 
overflow:hidden; 
border:0; 

Para el IES:

padding-left:1000px; 

Answer 9

color:transparent; y entonces cualquier text-transform propiedad hace el truco también.

Por ejemplo:

color: transparent; 
text-transform: uppercase; 

Answer 10

color:transparent; /* For FF */ 
*padding-left:1000px ; /* FOR IE6,IE7 */ 

Answer 11

que tenían el mismo problema. Y como muchos otros mensajes informaron: el truco de relleno solo funciona para IE.

font-size:0px todavía muestra algunos pequeños puntos.

Lo único que trabajó para mí está haciendo lo contrario

font-size:999px 

... pero yo sólo tenía botones de 25x25 píxeles.

Answer 12

La diferencia que algunos de ustedes están viendo en soluciones que funcionan o no en las diferentes IE puede ser debido a que tiene el modo de compatibilidad encendido o apagado. En Internet Explorer 8, el texto-guión funciona bien menos modo de compatibilidad está encendida. Si el modo de compatibilidad está activado, entonces el tamaño de fuente y la altura de línea hacen el truco pero pueden arruinar la pantalla de Firefox.

así que podemos usar un hack css para que Firefox ignorar nuestra regla es decir .. así ...

text-indent:-9999px; 
*font-size: 0px; line-height: 0; 

Answer 13

Use sentencias condicionales en la parte superior del documento HTML:

<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]--> 
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]--> 
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]--> 
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]--> 
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]--> 

Luego, en el CSS añadir

.ie7 button { font-size:0;display:block;line-height:0 } 

Tomado de para HTML 5 - más específicamente paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

Answer 14

Tenía esta notar de alguna parte:

la adición de texto-a transformar a la entrada para quitarla

input.button { 
    text-indent:-9999px; 
    text-transform:capitalize; 
} 

Answer 15

En cambio, acaba de hacer un hook_form_alter y hacer que el botón de un botón de imagen y ya está!

Answer 16

Escribir a su archivo CSS:

#your_button_id 
    { 
     color: transparent; 
    } 

Answer 17

este seguimiento ha funcionado mejor para mí:

HTML:

<input type="submit"/> 

CSS:

input[type=submit] { 
    background: url(http://yourURLhere) no-repeat; 
    border: 0; 
    display: block; 
    font-size:0; 
    height: 38px; 
    width: 171px; 
} 

Si no establece value en su <input type="submit"/>, colocará el texto predeterminado "Enviar" dentro de su botón. ASÍ, simplemente configure el font-size: 0; en su envío y luego asegúrese de establecer un height y width para su tipo de entrada para que se muestre su imagen. NO olvides preguntas de los medios para su presentar si los necesita, por ejemplo:

CSS:

@media (min-width:600px) { 
    input[type=submit] { 
    width:200px; 
    height: 44px; 
    } 
} 

Esto significa que cuando la pantalla es exactamente a 600px de ancho o mayor en el botón cambiará su dimensiones