CSS ao texto hide ENTRADA valor BUTTON
https://stackoverflow.com/questions/600438
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Atualmente, estou denominando um elemento <input type='button'/> com o seguinte CSS:
background: transparent url(someimage);
color: transparent;
Eu quero o botão para mostrar como uma imagem, mas eu não quero que o texto value para exibição em cima dela. Esta multa trabalha para Firefox como esperado. No entanto, no Internet Explorer 6 e Internet Explorer 7 ainda posso ver o texto.
Eu tentei todos os tipos de truques para esconder o texto, mas sem sucesso. Existe uma solução para tornar o Internet Explorer se comportar?
(estou constrangido a utilização type=button porque esta é uma forma Drupal e sua forma API não suporta imagem do tipo.)
Solução
Por que você está incluindo o atributo value em tudo? De memória, você não precisa especificá-lo (embora padrões HTML podem dizer que você faz - não tenho certeza). Se você precisa de um atributo value, porque não basta estado value=""?
Se você tomar essa atitude, o seu CSS precisará propriedades adicionais para a altura ea largura da imagem de fundo.
Outras dicas
Eu 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 */
Eu tive o problema oposto (trabalhou no Internet Explorer, mas não no Firefox). Para o Internet Explorer, você precisa adicionar preenchimento à esquerda, e para o Firefox, você precisa adicionar cor transparente. Então aqui é a nossa solução combinada para um x 16px ícone do botão 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;
}
bem:
font-size: 0;
line-height: 0;
trabalho incrível para mim!
Você já tentou definir a propriedade text-indent para algo como -999em? Essa é uma boa maneira de texto 'esconder'.
Ou você pode definir o tamanho da fonte para 0, o que seria muito trabalho.
http://www.productivedreams.com / ie-não-intepreting-text-indent-on-submeter-botões /
A diferença que alguns de vocês estão vendo em soluções que funcionam ou não nas diferentes IEs podem ser devido a ter modo de compatibilidade ligado ou desligado. No IE8, text-indent funciona muito bem a menos modo de compatibilidade está ligado. Se o modo de compatibilidade é, então font-size e line-height fazer o truque, mas pode atrapalhar a exibição do Firefox.
Assim, podemos usar um hack css para deixar firefox ignorar nossa regra ou seja .. assim ...
text-indent:-9999px;
*font-size: 0px; line-height: 0;
Use declarações condicionais na parte superior do 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]-->
Em seguida, no add CSS
.ie7 button { font-size:0;display:block;line-height:0 }
Tomado de HTML5 Boilerplate - mais especificamente paulirish.com/ 2008 / condicionais-estilo-vs-CSS-hacks-resposta-nem /
Eu tinha esse observou de algum lugar:
acrescentando text-transform a entrada para removê-lo
input.button {
text-indent:-9999px;
text-transform:capitalize;
}
Write ao seu arquivo CSS:
#your_button_id
{
color: transparent;
}
A aplicação font-size: 0.1px; ao botão funciona para mim no Firefox, Internet Explorer 6, Internet Explorer 7 e Safari. Nenhuma das outras soluções que eu encontrei trabalharam em todos os navegadores.
overflow:hidden e padding-left estão funcionando bem para mim.
Para Firefox:
width:12px;
height:20px;
background-image:url(images/arrow.gif);
color:transparent;
overflow:hidden;
border:0;
Para os IEs:
padding-left:1000px;
Isso funciona no Firefox 3, Internet Explorer 8, o Internet Explorer 8 modo de compatibilidade, Opera e Safari.
* Nota:. Célula da tabela que contém este tem padding:0 e 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;
Eu tive o mesmo problema. E, como muitas outras mensagens relatou:. O truque estofamento só funciona para IE
font-size:0px ainda mostra alguns pequenos pontos.
A única coisa que funcionou para mim está fazendo o oposto
font-size:999px
... mas eu só tinha botões de 25x25 pixels.
color:transparent; /* For FF */
*padding-left:1000px ; /* FOR IE6,IE7 */
Este seguinte trabalhou melhor para mim:
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;
}
Se você não definir value em seu <input type="submit"/> ele vai colocar o texto padrão "Enviar" dentro do seu botão. Assim, basta definir o font-size: 0; em seu enviar e, em seguida, certifique-se de definir um height e width para o seu tipo de entrada para que sua imagem será exibida. Não se esqueça consultas de mídia para a sua enviar se você precisar deles, por exemplo:
CSS:
@media (min-width:600px) {
input[type=submit] {
width:200px;
height: 44px;
}
}
Isto significa que quando a tela é exatamente 600px de largura ou maior o botão vai mudar de dimensões
Em vez disso, basta fazer uma hook_form_alter e fazer o botão de um botão de imagem e está feito!
color:transparent; e, em seguida, qualquer propriedade text-transform faz o truque também.
Por exemplo:
color: transparent;
text-transform: uppercase;
