CSS - Styling Form Elements

css

Tools

http://www.sitepoint.com/simplify-form-building-jotform/

Styling the select element:

http://cssglobe.com/post/8802/custom-styling-of-the-select-elements - Custom styling of the SELECT elements
http://davidwalsh.name/faux-select - Dress Up Your Select Elements with FauxSelect

Styling radio and check boxes:

http://acidmartin.wordpress.com/2009/07/17/using-css-to-style-radiobuttons-and-checkboxes-for-safari-and-chrome/ - Using CSS to Style Radiobuttons and Checkboxes in Safari and Chrome
http://www.webstuffshare.com/2010/03/stylize-your-own-checkboxes/ - Stylize Your Own Checkboxes
http://www.smashingmagazine.com/2010/04/24/seven-must-see-web-design-videos-and-presentations/ - Fancy checkboxes and radio buttons
http://webitect.net/design/webdesign/creating-fancy-bullet-points-with-pure-css3/ - Creating Fancy Checkmark with CSS3
http://acidmartin.wordpress.com/2011/02/24/custom-crossbrowser-styling-for-checkboxes-and-radio-buttons/ - Custom Crossbrowser Styling for Checkboxes and Radio Buttons
http://css-tricks.com/indeterminate-radio-buttons/

Styling file input fields:

http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom - Style File Input With CSS and The DOM

Styling buttons:

http://www.ampsoft.net/webdesign-l/image-button.html - CSS image replacement for submit buttons
http://speckyboy.com/2009/12/30/15-tips-and-techniques-for-styling-the-button-element/ - 15 Tips and Techniques for Styling the button element
http://particletree.com/features/rediscovering-the-button-element/ - Permanent Link: Rediscovering the Button Element

Styling form elements:

http://www.sitepoint.com/style-web-forms-css/
http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/ - CSS-Based Forms: Modern Solutions
http://aext.net/2010/02/css-text-indent-style-your-html-form/ - CSS text-indent: An Excellent Trick To Style Your HTML Form
http://net.tutsplus.com/tutorials/html-css-techniques/design-a-prettier-web-form-with-css-3/
http://www.webia.info/articles/usability/impressive-web-forms-from-coding-to-validation/ - Impressive web forms. From coding to validation!

How can we make sure that the text inside an input element is vertically aligned in the middle of an input element?

If we need to set the height of an input element at 26px, we can cause the text to be vertically aligned in the middle by setting the line-height attribute of the input element to match its height. We probably should not be setting the height on the input element though because it is considered as an inline element which normally does not have a height and width.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License