Styling testo di input CSS

Sto cercando di creare un testo di input come di seguito Image:
enter image description here
Prima ho usato CSS3 con qualche aiuto, come this violino. a causa di problemi con i vecchi browser che ho raggiunto non usare CSS3. Ora ho codificato in questo modo:Styling testo di input CSS

input[type=text] 
{ 
    color: #979797; 
    height: 28px; 
    padding-left: 10px; 
    text-decoration: none; 
     background-image: url('Pictures/Input-BG.png'); 
    background-repeat: repeat-x; 

} 
    <input id="txtScrictAddress" value="Your Adress (required)" type="text" />

Input-BG.png è questa immagine:
enter image description here
e here è il risultato.

Ho tagliato l'immagine di input giusto?
L'input ha un colore del bordo sinistro, come deve essere lo stile dell'ingresso in css come l'immagine?

fonte

2011-08-23 Shahin

L'immagine è buona, aggiungere 'border: 0;' per disabilitare lo stile del bordo predefinito. – Kapep

@Kapap Grazie, per quanto riguarda l'ombra sul lato sinistro di Input? – Shahin

Hai solo bisogno di impostare un raggio di confine e il bordo a nessuno. E modifica la tua immagine in modo che anche la cosa oscura si trovi sul lato sinistro.

input[type=text] 
{ 
    color: #979797; 
    height: 28px; 
    padding-left: 10px; 
    text-decoration: none; 
    background-image: url('http://i.stack.imgur.com/pbpVI.png'); 
    background-repeat: repeat-x; 
    border-radius: 5px; /*up to date browsers support this, but you can add prefixes if you want*/ 

    border: 0; 
}

http://jsfiddle.net/TGzng/8/

fonte

2011-08-23 06:23:07 Kyle

Grazie. Sembra meglio del mio codice, ma penso che il tuo campione sia ancora diverso dall'immagine che ho messo. Intendo la piccola ombra a sinistra di Input. – Shahin

Ho usato l'immagine che hai fornito, l'immagine deve essere modificata per includere la parte sinistra dell'ombra. – Kyle

se si desidera utilizzare le immagini per ottenere qualcosa in cui entrambe le estremità differiscono, avrete almeno bisogno di 2 immagini per ottenere quello. prova a cercare "sliding doors input css". forse this topic on SO ti aiuta (ma ci sono un milione di altri esempi su in the web e su Stackoverflow).

fonte

2011-08-23 06:20:41 oezi

Grazie. Quindi intendevi usare due immagini, una per la sinistra e una per lo sfondo, giusto? – Shahin

È necessario aggiungere un raggio di bordo per arrotondare i bordi. Questo non funzionerà pre-IE8 però.

input[type=text] 
{ 
    color: #979797; 
    height: 28px; 
    padding-left: 10px; 
    text-decoration: none; 
     background-image: url('http://i.stack.imgur.com/pbpVI.png'); 
    background-repeat: repeat-x; 
    border:1px solid #777; 
    border-radius:5px 
}

Per quanto riguarda la suddivisione delle immagini, modo facile per ottenere la parte dell'ombra sinistra significa che è necessario disporre di un'immagine molto ampia per lo sfondo. Oppure fai quella porta scorrevole che l'altra persona ha suggerito.

fonte

2011-08-23 06:22:52 jzm

Styling testo di input CSS

risposta

Problemi correlati