plantillas - tipos de display css




CSS para ocultar el texto de valor del BOTÓN DE ENTRADA (12)

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

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

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

https://code.i-harness.com

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


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


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


Escribe en tu archivo CSS:

#your_button_id 
    {
        color: transparent;
    }

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;

He notado esto desde alguna parte:

agregar texto-transformar a la entrada para eliminarlo

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

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.


Tuve el problema opuesto (funcionó 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 botón de icono de 16px x 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;
}

bien:

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

¡trabaja increíble para mí!


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

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;

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




transparency