CSS Styling Radio Button And Checkboxes
Now we want to do this without using Javascript or JQuery. Just plain HTML and CSS. Nothing fancy.
Lets dive into code.
1. The HTML
The HTML should looks pretty much like HTML. Nothing fancy here either. Just a bunch of radiobuttons following by labels.
<input type="radio" id="radio1" name="radios" value="all" checked> <label for="radio1">iPhone</label><input type="radio" id="radio2" name="radios"value="false"> <label for="radio2">Galaxy S IV</label><input type="radio" id="radio3" name="radios" value="true"> <label for="radio3">Nexus S</label> |
2. The CSS
Now the magic is in CSS. We want to change the look n feel of traditional radiobuttons into sexy pushbuttons.
Before we see the CSS, lets check one important CSS selector which you might not know already. It is called Adjacent sibling selectors. The idea is to select an element next to another element using syntax E1 + E2. So if I write a CSS code like:
div + p { color: red;} |
This should select only those
<p> elements which are adjacent (i.e. next to) <div> tags! This can come handy in lot of scenarios when you want to apply certain style to element based on their sequence.
So now we got the idea and know how Adjacent selector is used, lets apply that in our problem at hand.
/* Hide radio button (the round disc) we will use just the label to create pushbutton effect*/input[type=radio] { display:none; margin:10px;}/* Change the look'n'feel of labels (which are adjacent to radiobuttons). Add some margin, padding to label*/input[type=radio] + label { display:inline-block; margin:-2px; padding: 4px 12px; background-color: #e7e7e7; border-color: #ddd;}/* Change background color for label next to checked radio button to make it look like highlighted button*/input[type=radio]:checked + label { background-image: none; background-color:#d0d0d0;} |
3. More CSS
Lets add some more style to these radiobuttons and make them look more pushbutton’ish. Style courtesy Twitter Bootstrap :D
input[type=radio] { display:none;}input[type=radio] + label { display:inline-block; margin:-2px; padding: 4px 12px; margin-bottom: 0; font-size: 14px; line-height: 20px; color: #333; text-align: center; text-shadow: 0 1px 1px rgba(255,255,255,0.75); vertical-align: middle; cursor: pointer; background-color: #f5f5f5; background-image: -moz-linear-gradient(top,#fff,#e6e6e6); background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6)); background-image: -webkit-linear-gradient(top,#fff,#e6e6e6); background-image: -o-linear-gradient(top,#fff,#e6e6e6); background-image: linear-gradient(to bottom,#fff,#e6e6e6); background-repeat: repeat-x; border: 1px solid #ccc; border-color: #e6e6e6 #e6e6e6 #bfbfbf; border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25); border-bottom-color: #b3b3b3; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05); -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);}input[type=radio]:checked + label { background-image: none; outline: 0; -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05); -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05); box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05); background-color:#e0e0e0;} |
0 comments