CSS for Form Elements

CSS for Form Elements

CSS for Form Elements

CSS for Form Elements

Build to separate the document content (murk-up language) from document presentation, CSS has evolved within time and now there is nothing on the web that isn't possible with it from present different styles according to the screen resolution, for print to animations, gradient backgrounds and a lot more. CSS has changed the way the web was being designed.

Use of CSS in form elements other than the submit button & text is not common, designers still use images & CSS to style form elements, when it can be achieved with CSS alone. Styling with CSS reduces the page load and bandwidth consumption as well. In this article we will style the following form elements using CSS properties:

  • Text area.
  • Text fields.
  • Submit buttons.
  • Check boxes.
  • Radio buttons.
  • Select boxes.
  • File upload buttons.

We will be using CSS Selectors to do the magic, if you don't have a good hand on it, you can check out the article on CSS Selectors

Before we get to style the elements according to our needs we must have the default styles added by the browser removed. most browsers add a few pixels of margin & padding by default and some properties to the text, therefore it's necessary to have them eliminated.

input, select, textarea {
  margin:0; 
  padding:0; 	
  font-family:Arial;
  -moz-box-sizing:border-box; /* Firefox */
  -webkit-box-sizing:border-box; /* Safari */
  box-sizing:border-box;
}

The box-sizing will let us have padding and border for <textarea> & other elements that cut into its 100% width instead of expanding it.

Text Fields & Text area

TEXT FIELDS & TEXT AREA From left input & textarea without Style , followed by Styled and in focus.

Styling these elements is a very common and most designer use these to get some good look for the form, but just in case you don't, here's the code.

HTML
<input type="text" placeholder="Default text" />
<textarea placeholder="Default text" >
CSS
input, textarea { 
    width:12em; 
    border-radius:2px; 
    border: solid 1px #ccc; 
    padding:0.4em; 
    background-color: #f5f5f5; 
    box-shadow: inset 0 2px 3px rgba(0,0,0,0.2); 
}
textarea { 
    width:100%;
    height:10em; 
}

Making textarea larger than the other text inputs will give the user a straight idea about the field and also lets them see what they have typed, at least 5 lines will do fine. As far as usability considered it's necessary to let the user know the difference between the input he is focusing on with the rest.

input:focus, textarea:focus {
      border-color:#e8e07f;
}
HTML5 Elements

The new text attributes in HTML5 form elements like email, tel, etc can be styled like normal input fields; using CSS3 attributes selectors though you cannot style HTML5 date and number.


input[type="email"], 
input[type="tel"] {
    .
    .
}

Buttons

For form buttons like submit, reset it is essential to make them eye catching and push-able in order to increase revenue on an e-commerce website.

Form Buttons From left buttons without style , followed by styled and the states hover & focus.

Styling them is just like styling the HTML5 Form elements using the CSS3 attributes selector. If you are in need of few other buttons other than reset & submit, you can have a class with same set of CSS property.

HTML
<input type="reset" value=" reset ">
<input type="submit" value="submit"> 
<a href="#" class="button">Button</a>
CSS

input[type="submit"], input[type="reset"] { 
        border: solid 1px #ccc; 
        padding:0.4em 0.7em; 
	color:white;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
 /*To make the state change a little real*/
	-webkit-transition: background-color 200ms linear;	      /*Safari and Chrome*/
	-moz-transition: background-color 200ms linear; 	      /*Firefox*/
	-o-transition: background-color 200ms linear;	      /*opera*/
	-ms-transition: background-color 200ms linear;
	transition: all 200ms linear;
	background-color: #16a6b6;
	cursor: pointer;
	text-align: center;
}
input[type="submit"]:hover, input[type="reset"]:hover  , .button:hover{
	background:#ee6557;
}
input[type="submit"]:active, input[type="reset"]:active, .button:active{
	background:rgba(255,51,0,1);
}

As mentioned above in the input box styling, letting users know when they focus on an element will improve its usability, in this case we have 2 events hover & active states.

All the fields mentioned above were compact-able with most browsers, the form elements that are being discussed from now on need a Webkit supported browser, at present Google Chrome and Apple Safari supports it, Mozilla is expected to support it with the next release until then the Mozilla & other users will see traditional style.

Please note: the following only works as intended in browsers that support webkit properties.

Select List

Select List From left Select List with out style, styled List right.

After styling some fields without using a single image it's time to get complex, but still we will not be using any image as it's.

  <select> 
  <option>Option 1</option> 
  <option>Option 2</option> 
  <option>Option 3</option>
  <option>Option 4</option>
  <option>Option 5</option> 
</select> 

Styling the drop down button isn't possible so the tweak is to hide the button using -webkit-appearance and replace it with a custom arrow in the background image. Since we don't want to use the image as it is, we will use a 64base image.


select { 
    background-image: url('data:image/png;base64,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') ; 
    background-repeat:no-repeat;
    background-position:right;
    -webkit-appearance: none /* this is required for Webkit browsers */; 
    -moz-appearance:    none /* this is not supported currently */;
    appearance:         none;
    background-color:#e6e6e5;
    min-width:12em; 
     box-shadow: 2px 1px 2px 1px rgba(0,0,0,0.1); 
    border: solid 1px #ccc; 
    border-radius:5px; 
}

Check Boxes and Radio Buttons

File Input is another HTML5 form element, styling is similar to styling Select List, We will hide the default appearance of the element using -webkit-appearance and replace it with the new styles.

HTML
<input type="checkbox" id="box" /><label for="box">Checkbox</label>
<input type="radio" name="choice" id="radio1" /><label for="radio1">Radio 1</label>
<input type="radio" name="choice" id="radio2" /><label for="radio2">Radio 2</label>

Like the Select List drop down button, the Check Boxes & Radio buttons cannot be styled, but have the tweak, hide the button using -webkit-appearance and override.

CSS (Check Boxes)

input[type="checkbox"] {
	-webkit-appearance: none;
	border: 1px solid #cacece;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0 -15px 10px -12px rgba(0,0,0,0.05);
	display: inline-block;
	position: relative;
	top: 3px;
	margin: 0 10px;
	padding: 8px;
}

input[type="checkbox"]:checked{
	background-color: #fff;
	border: 1px solid #ccc;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0 -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0 0 10px rgba(0,0,0,0.1);
	background-position:center;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAAOtJREFUeNpi/P//PwM1ARMDlcGogcSB/fv3ax86dEgVq+T///9JxtLS0v/FxMT+Hz58WAldjmQXGhgY/H/69CkDAwMDAy8v71uKXBgYGHiRgYHhPwMDw/81a9a4Y1ODU7Oent7/hoaGLhi/urp6Asyw6urqCbj0YRVsb2+vg2mePHlyzpIlS4JhfA8Pj7v4fIFTIi4ubh8DA8N/Li6u/4KCgv8ZGBj+a2pq/icULHglvby8bsFcJioq+v/YsWPyFBn4//9/BlNT0z8MDAz/FyxYEElMxBFUcO3aNbaOjo46YlMC42jxNfgMBAwA56i5Dc5qIKUAAAAASUVORK5CYII=);

}
Check Boxes and Radio Buttons From left Check Boxes & Radio Buttons with out style , styled and check .

Just to prevent things from getting a mess, the CSS for Check Box & Radio buttons has been split.

CSS (Radio Buttons)


input[type="radio"] {
	-webkit-appearance: none;
	border: 1px solid #cacece;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0 -15px 10px -12px rgba(0,0,0,0.05);
	display: inline-block;
	position: relative;
	top: 3px;
	margin: 0 10px;
	padding: 8px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-ms-border-radius: 20px;
	-o-border-radius: 20px;
	border-radius: 20px;	
}

input[type="radio"]:checked{
	background-color: #ededed;
	border: 1px solid #ccc;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0 -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0 0 10px rgba(0,0,0,0.1);
}

File Input

File Input is another HTML5 form element, styling is again similar to styling a standard input, using the CSS3 attributes selector to get the magic done.

File Input From left File input with out style and the one with styles in right.
HTML

In here the only thing possible is to change the look of the choose file button, although it's possible to change the entire element using images, but in order to stay with the policy of no image the "choose file" button is the only available option. The -webkit-file-upload-button selector rocks..!.

CSS

input[type="file"] { 
    margin:0 0 0 0.5em; 	
}
input[type=file]::-webkit-file-upload-button { 
    background-color: #f5f5f5; 
    box-shadow: inset 0 2px 3px rgba(0,0,0,0.2); 
    border: solid 1px #ccc; 
    -webkit-appearance: none; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.2); 
    -webkit-border-radius: 5px;
}

Conclusion

Just like HTML5 new tags, these methods are not being used by developers just to support earlier browser versions, with Mozilla Firefox and IE failing to support a bundle of attributes, these image free styling methods are being ignored completely, using CSS than images will decrease the bandwidth consumption and Load time drastically. You are just left with one question, whether to prioritize performance or browser support, it's up to you to decide which one depending on the client and the project, as developers all we can do regarding this matter is to request user to upgrade their browsers.

About the Author

Anush

Anush is a freelance web designer and developer with a passion for interaction design. He founded Tech Stream in mid 2011 to spread the art of web design and programing Skills.

Comments

Wow ! you have someting to tell us. That's great! Please keep in mind that comments are moderated, we employ rel="nofollow" for links, avoid using a spammy word or a domain as your name, it might end up as a spam. Thanks for reading.

comments powered by Disqus

Back to Top