Pratiche di stile dello styling

Question

Ho creato un bel set di elementi del modulo in Photoshop e sto cercando di convertirli in HTML e CSS. Il semplice modulo di testo di input avrà un'immagine di sfondo, in quanto il campo non cambia di dimensioni. Tuttavia, il modulo dell'area di testo cambierà dinamicamente le dimensioni man mano che l'utente digita.

Normalmente, per costruire questo tipo di stile, mi piacerebbe avvolgere il campo di modulo nel div, come ad esempio:

<div class = "textarea-top"> 
    <div class = "textarea-bottom"> 
    <textarea></textarea> 
    </div> 
</div> 

O utilizzando più di sfondo-immagini in un unico involucro div:

<div class = "textarea"> 
    <textarea></textarea> 
</div> 

C'è un modo migliore per avvicinarsi a questo? Per riformulare, gli stili di campo sono immagini avanzate che possono essere ripetute (per il corpo del campo) e hanno uno stile per la parte superiore e inferiore. La domanda è: qual è la migliore pratica nell'affrontare questi stili avanzati di stile?

Answer 1

Non sono del tutto sicuro di cosa intenda per "best practice", ma una cosa che migliorerei è la semantica. Si potrebbe (dovrebbe?) Utilizzare <fieldset> anziché un, piuttosto privo di significato, <div>.

E non c'è bisogno di usare due <div> s' intorno al textarea, o anche più immagini di sfondo su un unico <div> (che è una proprietà CSS3, e non ampiamente supportato).

Invece, si dovrebbe avvolgere il <textarea> in un elemento <label>, e nidificano tuo background-immagini come ho descritto qui di seguito:

Prova questo:

<fieldset class="expandableInput"> 
    <label> 
    Semantic text: 
    <textarea></textarea> 
    </label> 
</fieldset> 

Bonus: elementi di modulo wrapping <label> in questo modo, offre un'area di clic più ampia, per consentire all'utente di concentrarsi sull'elemento del modulo. Basta essere attenti a <select> 's, che non gioca bello (anche se è valido HTML)

Il CSS sarebbe qualcosa di simile:

.expandableInput {background: url(/path/to/first/img);} 
    .expandableInput label {display: block; background: url(/path/to/second/img);} 
    .expandableInput textarea {display: block; margin-top: 3px; background: url(/path/to/third/img);} 

anche; Per gli sguardi coerenti sugli elementi del modulo, in ogni piattaforma del browser &, consiglio vivamente Nathan Smith Formalize CSS (richiede JS per il supporto HTML5 nei browser più vecchi).