CSS para ocultar el texto del valor del BOTÓN DE ENTRADA
https://stackoverflow.com/questions/600438
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Actualmente estoy diseñando un <input type='button'/> elemento con el siguiente CSS:
background: transparent url(someimage);
color: transparent;
Quiero que el botón se muestre como una imagen, pero no quiero que value texto que se mostrará encima de él.Esto funciona bien para Firefox como se esperaba.Sin embargo, en Internet Explorer 6 e Internet Explorer 7 todavía puedo ver el texto.
He probado todo tipo de trucos para ocultar el texto, pero sin éxito.¿Existe alguna solución para hacer que Internet Explorer se comporte?
(Estoy obligado a usar type=button porque este es un formulario Drupal y su API de formulario no admite el tipo de imagen).
Solución
¿Por qué incluye el atributo value? Desde la memoria, no necesita especificarlo (aunque los estándares HTML pueden decir que sí, no estoy seguro). Si necesita un atributo value="", ¿por qué no simplemente indicar <=>?
Si adopta este enfoque, su CSS necesitará propiedades adicionales para el alto y el ancho de la imagen de fondo.
Otros consejos
Yo uso
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 */
Tuve el problema opuesto (trabajé en Internet Explorer, pero no en Firefox). Para Internet Explorer, debe agregar el relleno izquierdo, y para Firefox, debe agregar un 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;
trabajo increíble para mí!
¿Has intentado establecer la propiedad de sangría de texto en algo así como -999em? Esa es una buena manera de "ocultar" 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 /
La diferencia que algunos de ustedes están viendo en soluciones que funcionan o no en los diferentes IE puede deberse a que el modo de compatibilidad está activado o desactivado. En IE8, la sangría de texto funciona bien a menos que el modo de compatibilidad esté activado. Si el modo de compatibilidad está activado, el tamaño de fuente y la altura de línea son suficientes, pero pueden estropear la pantalla de Firefox.
Entonces podemos usar un hack CSS para permitir que Firefox ignore nuestra regla, es decir ... así ...
text-indent:-9999px;
*font-size: 0px; line-height: 0;
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 CSS agregar
.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-none /
Lo noté desde algún lugar:
agregando text-transform a input para eliminarlo
input.button {
text-indent:-9999px;
text-transform:capitalize;
}
Escriba en su archivo CSS:
#your_button_id
{
color: transparent;
}
Aplicar 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 funcionó en todos los navegadores.
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 IE:
padding-left:1000px;
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 muchas otras publicaciones 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; /* For FF */
*padding-left:1000px ; /* FOR IE6,IE7 */
Lo 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 configuras value en tu <input type="submit"/> colocará el texto predeterminado "Enviar" dentro de su botón.Entonces, 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 las necesita, por ejemplo:
CSS:
@media (min-width:600px) {
input[type=submit] {
width:200px;
height: 44px;
}
}
Esto significa que cuando la pantalla tiene exactamente 600 píxeles de ancho o más, el botón cambiará sus dimensiones.
En lugar de eso, simplemente haz un hook_form_alter y convierte el botón en un botón de imagen y ¡listo!
color:transparent; y luego cualquier text-transform La propiedad también funciona.
Por ejemplo:
color: transparent;
text-transform: uppercase;
