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:
- <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>)
- <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
- <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.
- <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.
- 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!
