Como posso aplicar uma imagem de fundo para uma entrada de texto sem perder a borda padrão no Firefox e do WebKit navegadores?

StackOverflow https://stackoverflow.com/questions/1100409

Pergunta

Por alguma razão a maioria dos navegadores modernos vai parar de aplicar o seu estilo de borda de entrada padrão para caixas de texto se você dar-lhes uma imagem de fundo. Em vez disso você tem esse estilo inset feio. Do que eu posso dizer não há nenhuma maneira CSS para aplicar o estilo padrão do navegador também.

IE 8 não tem esse problema. Chrome 2 e Firefox 3.5 fazer e eu assumo outros navegadores também. Pelo que tenho lido online IE 7 tem o mesmo problema, mas esse post não tem uma solução.

Aqui está um exemplo: 

<html>
<head>
  <style>
    .pictureInput {
      background-image: url(http://storage.conduit.com/images/searchengines/search_icon.gif);
      background-position: 0 1px;
      background-repeat: no-repeat;
    }
  </style>
<body>
  <input type="text" class="pictureInput" />
  <br />
  <br />
  <input type="text">
</body>
</html>

No Chrome 2, parece que isso: http://www.screencast.com/users/jadeonly/folders/Snagit/media/d4ee9819-c92a-4bc2-b84e-e3a4ed6843b6

E no Firefox 3.5: http://www.screencast.com/users/jadeonly/folders/Snagit/media/d70dd690-9273-45fb-9893-14b38202ddcc

Update: JS Solução: Eu ainda estou esperando para encontrar uma solução puro CSS-on-the-entrada, mas aqui está a solução que eu vou usar para agora. Por favor, note isto é colado direito do meu aplicativo para que não é uma boa, ficar sozinho exemplo, como acima. Acabei incluiu as partes relevantes fora de minha grande aplicativo web. Você deve ser capaz de obter a idéia. O HTML é a entrada com a classe "link". A grande posição vertical do fundo é porque é um sprite. Testado no IE6, IE7, IE8, FF2, FF3.5, Opera 9.6, Opera 10, Chrome 2, Safari 4. Eu necessidade de ajustar a posição de fundo um par de pixels em alguns navegadores ainda:

JS: 

 $$('input.link').each(function(el) {
   new Element('span',{'class':'linkIcon'}).setText(' ').injectBefore(el);
   if (window.gecko) el.setStyle('padding', '2px 2px 2px 19px');
 });

CSS: 

input.link { padding-left: 19px; }
span.linkIcon { z-index: 2; width: 19px; height: 19px; position: absolute; background-image: url(img/fields.gif); background-position: 1px -179px; background-repeat: no-repeat; }

Update: CSS Close Enough Solução: Com base na sugestão de Kron aqui está o CSS para fazer as entradas correspondem FF e IE no Vista que torna uma boa escolha se você decidir desistir de padrões puros e aplicar um estilo. Eu modifiquei o seu ligeiramente e acrescentou os efeitos "azulado":

CSS: 

input[type=text], select, textarea {
    border-top: 1px #acaeb4 solid;
    border-left: 1px #dde1e7 solid;
    border-right: 1px #dde1e7 solid;
    border-bottom: 1px #e3e9ef solid;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    padding: 2px;
}
input[type=text]:hover, select:hover, textarea:hover, input[type=text]:focus, select:focus, textarea:focus {
    border-top: 1px #5794bf solid;
    border-left: 1px #c5daed solid;
    border-right: 1px #b7d5ea solid;
    border-bottom: 1px #c7e2f1 solid;
}
select { border: 1px; }
Foi útil?

Solução

Quando você altera fronteira fundo ou o estilo em entradas de texto Eles voltar para o modo básico de renderização. entradas de texto que são os-estilo são geralmente sobreposições (como o flash é) que são prestados no topo do documento.

Eu não acredito que há uma CSS correção pura para o seu problema. Melhor coisa a fazer - na minha opinião - é escolher um estilo que você gosta e imitá-lo com CSS. De modo que não importa o navegador que você está dentro, as entradas terão a mesma aparência. Você ainda pode ter pairar efeitos e similares. OS X efeitos estilo brilho pode ser complicado, mas eu tenho certeza que é factível.

@Alex Morales: Sua solução é redundante. fronteira: 0; é ignorado em favor de border: 1px solid # abadb3; e resulta em bytes desnecessários transferidos via cabo.

Outras dicas

Este é o CSS que eu uso que pode fornecer a volta padrão visual: 

input, select, textarea {
    border-top: 1px #acaeb4 solid;
    border-left: 1px #dde1e7 solid;
    border-right: 1px #dde1e7 solid;
    border-bottom: 2px #f1f4f7 solid;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
}

Você também pode aplicar :active e dar os controles que azulado tonalidade uma vez que está selecionado.

Update!

Ok, aqui está uma solução alternativa que eu acho que é cross-browser compatível. O único problema seria que os difere de estilo padrão por alguns pixels de modo que este pode precisar de alguns ajustes. 

<html>
    <head>
        <style>
            .pictureInput {
                text-indent: 20px;
            }
            .input-wrapper {
                position:relative;
            }
            .img-wrapper {
                position:absolute;
                top:2px;
                left:2px;
            }
        </style>
    </head>
    <body>
        <div class="input-wrapper">
            <div class="img-wrapper"><img src="http://storage.conduit.com/images/searchengines/search_icon.gif" alt="asddasd" /></div>
            <input type="text" class="pictureInput" />
        </div>
        <br />
        <br />
        <input type="text">
    </body>
</html>

Ao usar o posicionamento absoluto-relativo você pode fazer a div absoluta (que contém a imagem) agir absoluta em relação ao seu pai que todos os navegadores que eu sei sobre (sem contar sub-IE6 versões, IE6 + são muito bem) pode manipular. scaling usuário pode ser um problema, mas isso é como é com soluções alternativas.

No lado positivo, você não tem que mudar os estilos em suas entradas em tudo (exceto para text-indent, mas você faria isso de qualquer maneira eu espero).

Em contrapartida, não é a solução mais bonita.

Old!

Eu sei que isto não é o que você quer, mas você poderia fazer algo assim, pelo menos, fazer toda a entrada faz fronteira consistente. 

input {
    border-color:#aaa;
    border-width:1px;
}

exemplo de imagem

Eu não tentei em todos os navegadores, mas desde que você não está definindo o estilo de borda que poderia usar o estilo nativo, mas com outro tamanho (embora você pode ignorar isso também). Eu acho que a chave é apenas definir o border-color a algo para que todos os campos de entrada usará o mesmo border-color e deixar o resto para o navegador.

Eu tive uma imagem de fundo do texto, e isso também era me irritar. Então eu coloquei um parente

em volta do e, em seguida, adicionado a imagem absolutamente posicionado sobre o .

Então é claro que eu precisava de um pouco mais de Javascript para ocultar a imagem se ele foi clicado, ou se a entrada tem o foco de tabulação, ou por ser clicado em torno das bordas da imagem.

Com um pouco de mexer essa boa bonita olhou com IE8, Firefox, Chrome e Opera, mas é um truque horrível e seria bom se os navegadores fixa-lo.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top