internet-explorer plantillas - CSS para ocultar el texto de valor del BOTÓN DE ENTRADA




codigo tipos (15)

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

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

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

Quiero que el botón se muestre como una imagen, pero no quiero que el texto de value muestre en la parte superior. 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?

(Estoy obligado a usar el type=button porque es un formulario de Drupal y su forma API no es compatible con el tipo de imagen).


He notado esto desde alguna parte:

agregar texto-transformar a la entrada para eliminarlo

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

La diferencia que algunos de ustedes ven en las soluciones que funcionan o no en los diferentes EI puede deberse a que tienen el modo de compatibilidad activado o desactivado. En IE8, text-indent funciona bien a menos que el modo de compatibilidad esté activado. 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.

Entonces podemos usar un hack css para dejar que firefox ignore nuestra regla ie ... así ...

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

Escribe en tu archivo CSS:

#your_button_id 
    {
        color: transparent;
    }


Esta siguiente 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 el value en su <input type="submit"/> , colocará el texto predeterminado "Submit" 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 olvide las consultas de medios para su envío si los necesita, por ejemplo:

CSS:

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

Esto significa que cuando la pantalla tiene exactamente 600px de ancho o más, el botón cambiará sus dimensiones


¿Por qué estás incluyendo el atributo de 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 de value , ¿por qué no simplemente state value="" ?

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


Use declaraciones 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 complemento de CSS

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

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


En su lugar, simplemente haz un hook_form_alter y haz que el botón sea un botón de imagen ¡y listo!


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

Para Firefox:

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

Para los IEs:

padding-left:1000px;

yo suelo

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

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

* Nota: la celda de la 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;

Tuve el mismo problema. Y como muchos otros mensajes informaron: el truco de relleno solo funciona para IE.

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

Lo único que funcionó para mí es hacer lo contrario

font-size:999px

... pero solo tenía botones de 25x25 píxeles.


color:transparent; y luego cualquier propiedad de text-transform también funciona.

Por ejemplo:

color: transparent;
text-transform: uppercase;

Vi las respuestas anteriores, y funcionarán solo para ese ancho de pantalla (no responde). Para el responsive tienes que usar flex.

Ejemplo:

div{ display:flex; align-item:center;}




css internet-explorer drupal input transparency