Che HTML/CSS useresti per creare un input di testo con uno sfondo?

Question

Ho un sito web design che comprende campi di input di testo che assomigliano a questo:

Input Field http://img401.imageshack.us/img401/4453/picture1ts2.png

Mi chiedo quale sia la soluzione migliore per la creazione di questo campo di input è.

Un'idea che ho è quello di avere sempre un div intorno all'ingresso un'immagine di sfondo con e tutte le frontiere disabilitati sul campo di immissione e la larghezza specificate in pixel, come ad esempio:

<div class="borderedInput"><input type="text" /></div> 

ho cercato di scoraggiarli dall'usare questo formato, ma non saranno scoraggiati, quindi sembra che dovrò farlo.

È meglio o c'è un altro modo?

-

Trial:

ho provato la seguente:

<style type="text/css"> 
input.custom { 
    background-color: #fff; 
    background:url(/images/input-bkg-w173.gif) no-repeat; 
    width:173px; 
    height:28px; 
    padding:8px 5px 4px 5px; 
    border:none; 
    font-size:10px; 
} 
</style> 
<input type="text" class="custom" size="12" /> 

ma in IE (6 & 7) esegue le seguenti operazioni quando si digita più rispetto alla larghezza:

Over Length http://img240.imageshack.us/img240/1417/picture2kp8.png

Answer 1

lo farei in questo modo:

<style type="text/css"> 
div.custom { 
    background:url(/images/input-bkg-w173.gif) no-repeat; 
    padding:8px 5px 4px 5px; 
} 
div.custom input { 
    background-color: #fff; 
    border:none; 
    font-size:10px; 
} 
</style> 
<div class="custom"><input type="text" class="custom" size="12" /></div> 

Devi solo regolare i valori di riempimento così tutto si adatta correttamente. È - ai miei occhi - sicuramente la soluzione migliore poiché in qualsiasi altro caso stai lavorando con un intero campo di input. E l'intero campo di input è - per definizione - una casella in cui gli utenti possono inserire il testo.

Se è possibile fare affidamento su JavaScript, è possibile raggruppare tali elementi div attorno ai campi di input in modo programmatico.

Edit: Con jQuery si poteva fare in questo modo:

$('input.custom').wrap('<div class="custom"></div>'); 

CSS:

div.custom { 
    background:url(/images/input-bkg-w173.gif) no-repeat; 
    padding:8px 5px 4px 5px; 
} 
input.custom { 
    background-color: #fff; 
    border:none; 
    font-size:10px; 
} 

E il codice HTML:

<input class="custom" ... /> 

Answer 2

Ho fatto questo è un paio di volte. Ho l'immagine di sfondo all'interno di un div e uso css per posizionare il campo di input di conseguenza.

dare un'occhiata al seguente sito che ho creato che ha utilizzato questa tecnica e utilizzare il codice: http://www.ukoffer.com/ (mano destra lato Newsletter)

Answer 3

Non è necessario l'elemento div, è possibile assegnare uno sfondo all'ingresso direttamente.

Modifica: Ecco il codice di lavoro. L'ho provato, ma dovrai adattarlo alle tue esigenze. Per quanto posso dire, tutto qui è necessario.

input { 
    background: #FFF url(test.png) no-repeat bottom right; 
    width: 120px; 
    height: 20px; 
    line-height:20px; 
    padding:0; 
    text-indent:3px; 
    margin:0; 
    border: none; 
    overflow:hidden; 
} 

Edit2: io non sono del tutto sicuro perché sto ottenendo downvoted, ma questo metodo dovrebbe funzionare a meno che non hai bisogno di un'immagine più grande l'elemento di input stessa. In tal caso, dovresti usare l'elemento div extra. Tuttavia, se l'immagine ha le stesse dimensioni dell'input, non è necessario il markup extra.

Edit3: Ok, dopo che Bobince ha indicato un problema, mi sto avvicinando un po '. Questo funzionerà in IE6 & 7 ed è chiuso in FF, ma sto ancora lavorando su quella parte.

input { 
    background: #FFF url(test.png) no-repeat 0px 0px; 
    background-attachment:fixed; 
    width: 120px; 
    height: 20px; 
    line-height:20px; 
    padding:0px; 
    text-indent:3px; 
    margin:0; 
    border: none; 
} 
body>input { 
    background-position:13px 16px; 
} 

Edit4: Ok, penso che ho avuto in questo momento, ma richiede l'uso di un selettore CSS3, in modo da non convalidare come CSS 2.1.

input { 
    background: #FFF url(test.png) no-repeat 0px 0px; 
    background-attachment:fixed; 
    width: 120px; 
    height: 20px; 
    line-height:20px; 
    padding:0px; 
    text-indent:3px; 
    margin:0; 
    border: none; 
} 
body>input { 
    background-position:13px 16px; 
} 
body>input:enabled { 
    background-position:9px 10px; 
} 

corpo> ingresso sarà bersaglio tutto tranne per IE6, corpo> ingresso: abilitato si rivolgerà eventuali elementi di modulo non disabili per tutti i browser tranne IE 6, 7, & 8. Tuttavia, poiché: abilitato è un selettore CSS3, non convalida come CSS2.1. Non ero in grado di trovare un selettore CSS2 appropriato che mi permettesse di separare IE7 dagli altri browser. Se non si convalida (ancora, fino a quando il validatore non passa a CSS3) è un problema per te, allora penso che la tua unica opzione sia l'elemento div extra.

Answer 4

Avete valutato immagine di sfondo utilizzando in questo modo:

<style type="text/css"> 
    input{ 
    background-color: #AAAAAA; 
    background-image: url('http://mysite.com/input.gif'); 
    border: 0px; 
    font-family: verdana; 
    font-size: 10px; 
    color: #0000FF; 
} 

Answer 5

per quanto ne so, lo sfondo di scorrimento il problema può essere risolto sia in Firefox che in un amico s, OR Internet Exploder; ma non rendere tutti felici in una volta.

Normalmente avrei detto di assegnare direttamente l'input, ma ora che ci penso che l'esempio div non suona male e dovrebbe occuparsi del problema dello scorrimento dell'immagine di sfondo.

In tal caso, si imposta una posizione div: relativa e si inserisce l'input al suo interno con il riempimento e la larghezza corretti (o 100% di larghezza se il riempimento è 0), lo sfondo trasparente e si inserisce un'immagine sul div .

Answer 6

okoman ha ottenuto l'aspetto CSS corretto. Posso suggerire di usare un <label> per migliorare la struttura semantica del markup?

<label id="for-field-name" for="field-name"> 
    <span class="label-title">Field Name <em class="required">*</em></span> 
    <input id="field-name" name="field-name" type="text" class="text-input" /> 
</label> 

<style type="text/css"> 
    label, span.label-title { display: block; } 
</style> 

Non solo questo è più accessibile, ma fornisce numerosi ami che è possibile utilizzare per qualsiasi tipo di manipolazione DOM, convalida o stile specifico campo in futuro.

Edit: Se non si desidera che il titolo etichetta visualizzata per qualche motivo, si può dare una classe di 'accessibilità' e impostare la classe per display: none; nel CSS. Ciò consentirà agli screen reader di capire l'input ma nasconderlo agli utenti abituali.

Answer 7

Il modo più semplice per sbarazzarsi del troppo pieno, senza JavaScript è semplice:

1. Creare un 3 campate, e impostare le loro altezze per l'altezza dell'immagine .
2. Taglia l'immagine in 3 parti, assicurandoti di tagliare l'immagine in modo tale che le parti rotonde sinistra e destra si trovino rispettivamente sulla 1a e 3a immagine .
3. impostare lo sfondo della prima campata all'immagine con il bordo sinistro, e impostarlo su no-repeat.
4. impostare lo sfondo della terza campata per l'immagine con il bordo destro e impostarlo in no-repeat.
5. Inserire l'input nell'intervallo medio, ricordando di impostare l'altezza all'altezza degli span e il relativo sfondo all'immagine 2 e solo a ripetizione-x.
6. Ciò assicurerà che l'ingresso sembrerà di espandere orizzontalmente volta l'ingresso viene riempito. No sovrapposti e nessun JS necessario.

HTML Supponendo che l'altezza dell'immagine è 60px, la larghezza della prima e della terza campata è 30px,

<span id="first">nbsp;</span><br /> 
<span id="second"><input type="text" /></span><br /> 
<span id="third">nbsp;</span> 

CSS

span#first{background:url('firstimage') no-repeat; height:60px; width:30px;} 
span#third{background:url('thirdimage') no-repeat; height:60px; width:30px;} 
span#second input{background:url('second image') repeat-x; height:60px;} 

Questo dovrebbe risolvere il problema.