Come posso applicare un'immagine di sfondo da un input di testo senza perdere il bordo predefinito in Firefox e WebKit browser?

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

Domanda

Per qualche ragione i browser più moderni smetteranno di applicare il loro stile di input del bordo predefinito alle caselle di testo se si dà loro un'immagine di sfondo. Invece si ottiene quello stile inserto brutto. Da quello che posso dire che non c'è modo CSS per applicare lo stile browser predefinito sia.

IE 8 non ha questo problema. Chrome 2 e Firefox 3.5 fanno e presumo altri browser come bene. Da quello che ho letto in linea IE 7 ha lo stesso problema, ma questo post non ha avuto una soluzione.

Ecco un esempio: 

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

In Chrome 2 Sembra che questo: http://www.screencast.com/users/jadeonly/folders/Snagit/media/d4ee9819-c92a-4bc2-b84e-e3a4ed6843b6

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

Aggiornamento: JS Soluzione: Sto ancora sperando di trovare una soluzione pura CSS-on-the-input, ma ecco la soluzione userò per ora. Si prega di notare che questo è incollato a destra, fuori la mia app, quindi non è una bella, stare da solo esempio come sopra. Ho appena incluso le parti rilevanti dal mio grande web app. Si dovrebbe essere in grado di ottenere l'idea. Il codice HTML è l'ingresso con la classe "link". La grande posizione verticale sfondo è perché è un folletto. Testato in IE6, IE7, IE8, FF2, FF3.5, Opera 9.6, Opera 10, Chrome 2, Safari 4. Ho bisogno di modificare la posizione di fondo un paio di pixel in alcuni browser ancora:

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; }

Aggiornamento: CSS Close Enough Soluzione: Sulla base del suggerimento da Kron ecco il CSS per rendere gli ingressi corrispondono FF e IE in Vista che rende una buona scelta se si decide di rinunciare a valori di default puri e applicare uno stile. Ho modificato la sua un po 'e ha aggiunto gli effetti "bluastre":

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; }
È stato utile?

Soluzione

Quando si cambia bordo o stile di fondo su input di testo Essi ripristinare la modalità di rendering molto di base. input di testo che vengono os-stile sono di solito si sovrappone (come flash) che sono rese sulla parte superiore del documento.

Non credo ci sia una correzione CSS puro al tuo problema. La cosa migliore da fare - a mio parere - è quello di scegliere uno stile che ti piace e emularla con i CSS. In modo che non importa quale browser si trovi, gli ingressi avranno lo stesso aspetto. Si può ancora avere effetti al passaggio del mouse e simili. effetti X stile OS bagliore potrebbe essere difficile, ma sono sicuro che è fattibile.

@alex Morales: La vostra soluzione è ridondante. border: 0; viene ignorato a favore di border: 1px solid # abadb3; e si traduce in byte inutili trasferiti attraverso il filo.

Altri suggerimenti

Questo è il CSS che uso che può fornire il default guardare indietro: 

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;
}

Si potrebbe anche applicare :active e dare i comandi che bluastro Tonalità una volta che sono selezionati.

Aggiornamento!

Ok, qui è una soluzione che penso è cross-browser compatibile. L'unico problema è che lo stile di default differisce di alcuni pixel quindi questo potrebbe aver bisogno di qualche ritocco. 

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

Utilizzando il posizionamento assoluto-relativo è possibile rendere il div assoluto (contenente l'immagine) agire assoluto in relazione alla sua madre che tutti i browser mi conoscono (senza contare le versioni sub-IE6, IE6 + vanno bene) in grado di gestire. Adattamento utente potrebbe essere un problema, ma questo è come è con soluzioni alternative.

Al rialzo, non c'è bisogno di cambiare gli stili di ingressi a tutti (tranne che per il testo-rientro, ma si farebbe che comunque spero).

In basso, non è la soluzione più bella.

Old!

So che questo non è ciò che si vuole, ma si potrebbe fare qualcosa di simile ad almeno rendere tutti gli input confina coerente. 

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

immagine di esempio png

Non ho provato in tutti i browser, ma dal momento che non sta impostando l'border-style potrebbe utilizzare lo stile nativo, ma con un altro formato (anche se si può saltare anche questo). Penso che la chiave è quello di impostare solo il border-color a qualcosa in modo che tutti i campi di input useranno lo stesso border-color e lasciare il resto fino al browser.

ho avuto un'immagine di sfondo del testo, e questo era anche fastidioso me. Così ho messo un parente

intorno e poi aggiunto l'immagine assolutamente posizionato sopra il .

Poi, naturalmente, ho bisogno di un po 'di più Javascript per nascondere l'immagine se è stato cliccato, o se l'ingresso ha la messa a fuoco tabulazione, o per essere cliccato intorno ai bordi dell'immagine.

Con un po 'di armeggiare questo sembrava abbastanza buono con IE8, Firefox, Chrome e Opera, ma è un kludge orribile e sarebbe bello se i browser è stato risolto.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top