css - para - plantillas contact form 7
CSS para ocultar el texto de valor del BOTÓN DE ENTRADA (17)
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).
¿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/
¿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.
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.
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;
}
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
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;
}
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;
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;
}
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/
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 */
color:transparent; y luego cualquier propiedad de text-transform también funciona.
Por ejemplo:
color: transparent;
text-transform: uppercase;
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 */