Scusate per il titolo chiaro, ma spero che capirete leggendo la guida.
Spesso ci capita di dover stabilire il css per elementi a piu' diramazioni, ovvero di cui si può scegliere il tipo nell' HTML, come nel caso del tag <input>.
Come sappiamo, questo tag ha varie 'sottocategorie' quali:
E ovviamente i nuovi arrivi dell' HTML5:
ecc. Non li metto tutti dato che l' aspetto è come quello dell' input text.
Quindi, tornando a noi, spesso vogliamo specificare lo stile ad esempio dell' input submit , ma dando uno style ad una nuova classe o id (ad esempio .submit , #submit ), altrimenti vengono coinvolti anche tag che non vogliamo influenzare come i text.
Per chi non lo sapesse c' è la possibilità , nel CSS , di specificare per quali tipi di quell' elemento specificare lo stile. Detto così sembra complicato, ma è semplicissimo.
Mettiamo caso che vogliamo rendere gli input submit con bordi arrotondati, con lo sfondo nero e il colore del testo bianco e grassetto, invece di fare:
Metteremo, più semplicemente:
Come possiamo notare, nel css abbiamo aggiunto accanto a input la parte [type="submit"], che appunto indica che deve agire solamente sugli input di tipo submit.
Questo metodo è molto utile se ad esempio abbiamo form articolati, ad esempio con molti text , nel css basterà quindi specificare input[type="text"] e così evitiamo di specificare la classe ogni volta. Per chi non avesse ancora ben chiare le idee:
Fonte: esperienza personale :P
Spesso ci capita di dover stabilire il css per elementi a piu' diramazioni, ovvero di cui si può scegliere il tipo nell' HTML, come nel caso del tag <input>.
Come sappiamo, questo tag ha varie 'sottocategorie' quali:
- text ( <input type="text"> )
- password ( <input type="password"> )
- radio ( <input type="radio"> )
- checkbox ( <input type="checkbox"> )
- submit ( <input type="submit"> )
- reset ( <input type="reset"> )
- button ( <input type="button"> )
- image ( <input type="image"> )
E ovviamente i nuovi arrivi dell' HTML5:
- email ( <input type="email"> )
- num ( <input type="num"> )
ecc. Non li metto tutti dato che l' aspetto è come quello dell' input text.
Quindi, tornando a noi, spesso vogliamo specificare lo stile ad esempio dell' input submit , ma dando uno style ad una nuova classe o id (ad esempio .submit , #submit ), altrimenti vengono coinvolti anche tag che non vogliamo influenzare come i text.
Per chi non lo sapesse c' è la possibilità , nel CSS , di specificare per quali tipi di quell' elemento specificare lo stile. Detto così sembra complicato, ma è semplicissimo.
Mettiamo caso che vogliamo rendere gli input submit con bordi arrotondati, con lo sfondo nero e il colore del testo bianco e grassetto, invece di fare:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Metteremo, più semplicemente:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Come possiamo notare, nel css abbiamo aggiunto accanto a input la parte [type="submit"], che appunto indica che deve agire solamente sugli input di tipo submit.
Questo metodo è molto utile se ad esempio abbiamo form articolati, ad esempio con molti text , nel css basterà quindi specificare input[type="text"] e così evitiamo di specificare la classe ogni volta. Per chi non avesse ancora ben chiare le idee:
- text => input[type="text"]
- password => input[type="password"]
- radio => input[type="radio"]
- checkbox => input[type="checkbox"]
- submit => input[type="submit"]
- reset => input[type="reset"]
- button => input[type="button"]
- image => input[type="image"]
- email => input[type="email"]
- num => input[type="num"]
Fonte: esperienza personale :P
