Azi am început să tai un layout ce avea o parte dintr-un formular un pic… diferit de cum ar fi normal. Şi anume un alt buton de upload. Şi m-am gândit eu puţin şi am ajuns la concluzia că elementele ce intră într-un tag form sunt cel mai greu de customizat:

1. <legend> se comportă diferit pe firefox comparativ cu IE sau Opera, neputând fi poziţionat în niciun fel - padding/margin. Singura soluţie ar fi poziţionare relativă a fieldset-ului şi poziţionare absolută a tag-ului legend. Sau folosirea unui titlu în locul lui <legend> (<h4> sau <h5>)
2. <input type=”checkbox” /> şi <input type=”radio” /> nu poţi sa le convingi prea uşor de un anume background/culoare. Cred că ţine şi de setările sistemului de operare
3. <input type=”text” /> şi <textarea> au un „mic” bug în IE: dacă are o imagine ca background iar textul depăşeşte lătimea definită, background-ul pleacă la pădure. Fix? Pentru IE6 se defineşte bg ca fixed. Pentru IE7 nu am găsit altă soluţie decât să pun input-ul sau textarea într-un alt element (span/div) şi schimb background la acest element.
4. <select> & <option> padding-ul se aplică după ureche, în funcţie de browser. În plus, în IE6 este un bug criminal: niciun element nu poate apărea deasupra unui <select>. Soluţia? Dacă foloseşti jQuery, găseşti o mulţime.
5. Am lăsat cireaşa de pe tort (bomboana de pe colivă?!) la urmă: <input type=”file” />. Un simplu style=”border:1px solid #000″ îi strică rău de tot aspectul. Soluţii sunt multiple:

• nu te legi sub nicio formă de file şi te mulţumeşti doar cu lăţime;
• foloseşti o şmecherie făcută în flash (ai nevoie şi de cunoştinţe server side);
• foloseşti o şmecherie făcută în javascript. Sau un plugin pentru jQuery (download AICI deoarece nu prea merge site-ul).

Pentru primele patru probleme există o rezolvare foarte simplă all in one. Este o versiune recentă ce rezolvă o parte din problemele iniţiale (select-ul nu funcţiona decât dacă se făcea click pe săgeată, nu se putea folosi tastatura).

Enjoy!