CSS Styling Radio Button and Checkboxes

CSS Styling Radio Button and Checkboxes

radio-button-css-style
The idea is simple. We want to change the look and feel of existing radio buttons into more of a push button. The above image pretty much tells what we want to achieve.

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.


<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio1<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radios<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>all<span class="token punctuation">"</span></span> <span class="token attr-name">checked</span><span class="token punctuation">&gt;</span></span>
       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>iPhone<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
    &lt;input type="radio" id="radio2" name="radios"value="false"&gt;
       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Galaxy S IV<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio3<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radios<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
       <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Nexus S<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>

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:


<span class="token selector">div + p</span> <span class="token punctuation">{</span>
     <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

This should select only those

&lt;p&gt;

elements which are adjacent (i.e. next to)

&lt;div&gt;

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.


<span class="token comment" spellcheck="true">/*
  Hide radio button (the round disc)
  we will use just the label to create pushbutton effect
*/</span>
<span class="token selector">input[type=radio]</span> <span class="token punctuation">{</span>
    <span class="token property">display</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span>
    <span class="token property">margin</span><span class="token punctuation">:</span>10px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment" spellcheck="true">/*
  Change the look'n'feel of labels (which are adjacent to radiobuttons).
  Add some margin, padding to label
*/</span>
<span class="token selector">input[type=radio] + label</span> <span class="token punctuation">{</span>
    <span class="token property">display</span><span class="token punctuation">:</span>inline-block<span class="token punctuation">;</span>
    <span class="token property">margin</span><span class="token punctuation">:</span>-2px<span class="token punctuation">;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> 4px 12px<span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> #e7e7e7<span class="token punctuation">;</span>
    <span class="token property">border-color</span><span class="token punctuation">:</span> #ddd<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment" spellcheck="true">/*
 Change background color for label next to checked radio button
 to make it look like highlighted button
*/</span>
<span class="token selector">input[type=radio]:checked + label</span> <span class="token punctuation">{</span>
   <span class="token property">background-image</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span>#d0d0d0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

Demo


JSFiddle: http://jsfiddle.net/viralpatel/p499h/

Читайте также  Вывод всех товаров категории на странице товара. Simpla.

Voilla!! That works!! Although they look different, these are basically radiobuttons at heart. You can create forms using these buttons and on submit, can handle values at server side as normal radiobuttons. No Javascript, no jquery hacks..

3. More CSS

Lets add some more style to these radiobuttons and make them look more pushbutton’ish. Style courtesy Twitter Bootstrap 😀


<span class="token selector">input[type=radio]</span> <span class="token punctuation">{</span>
          <span class="token property">display</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span>
     <span class="token punctuation">}</span>

     <span class="token selector">input[type=radio] + label</span> <span class="token punctuation">{</span>
          <span class="token property">display</span><span class="token punctuation">:</span>inline-block<span class="token punctuation">;</span>
          <span class="token property">margin</span><span class="token punctuation">:</span>-2px<span class="token punctuation">;</span>
          <span class="token property">padding</span><span class="token punctuation">:</span> 4px 12px<span class="token punctuation">;</span>
          <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
          <span class="token property">font-size</span><span class="token punctuation">:</span> 14px<span class="token punctuation">;</span>
          <span class="token property">line-height</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
          <span class="token property">color</span><span class="token punctuation">:</span> #333<span class="token punctuation">;</span>
          <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
          <span class="token property">text-shadow</span><span class="token punctuation">:</span> 0 1px 1px <span class="token function">rgba</span><span class="token punctuation">(</span>255,255,255,0.75<span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token property">vertical-align</span><span class="token punctuation">:</span> middle<span class="token punctuation">;</span>
          <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span>
          <span class="token property">background-color</span><span class="token punctuation">:</span> #f5f5f5<span class="token punctuation">;</span>
          <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">-moz-linear-gradient</span><span class="token punctuation">(</span>top,#fff,#e6e6e6<span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">-webkit-gradient</span><span class="token punctuation">(</span>linear,0 0,0 100%,<span class="token function">from</span><span class="token punctuation">(</span>#fff<span class="token punctuation">)</span>,<span class="token function">to</span><span class="token punctuation">(</span>#e6e6e6<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">-webkit-linear-gradient</span><span class="token punctuation">(</span>top,#fff,#e6e6e6<span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">-o-linear-gradient</span><span class="token punctuation">(</span>top,#fff,#e6e6e6<span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>to bottom,#fff,#e6e6e6<span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token property">background-repeat</span><span class="token punctuation">:</span> repeat-x<span class="token punctuation">;</span>
          <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #ccc<span class="token punctuation">;</span>
          <span class="token property">border-color</span><span class="token punctuation">:</span> #e6e6e6 #e6e6e6 #bfbfbf<span class="token punctuation">;</span>
          <span class="token property">border-color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>0,0,0,0.1<span class="token punctuation">)</span> <span class="token function">rgba</span><span class="token punctuation">(</span>0,0,0,0.1<span class="token punctuation">)</span> <span class="token function">rgba</span><span class="token punctuation">(</span>0,0,0,0.25<span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token property">border-bottom-color</span><span class="token punctuation">:</span> #b3b3b3<span class="token punctuation">;</span>
          <span class="token property">filter</span><span class="token punctuation">:</span> <span class="token property">progid</span><span class="token punctuation">:</span>DXImageTransform.Microsoft.<span class="token function">gradient</span><span class="token punctuation">(</span>startColorstr=<span class="token string">'#ffffffff'</span>,endColorstr=<span class="token string">'#ffe6e6e6'</span>,GradientType=0<span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token property">filter</span><span class="token punctuation">:</span> <span class="token property">progid</span><span class="token punctuation">:</span>DXImageTransform.Microsoft.<span class="token function">gradient</span><span class="token punctuation">(</span>enabled=false<span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token property">-webkit-box-shadow</span><span class="token punctuation">:</span> inset 0 1px 0 <span class="token function">rgba</span><span class="token punctuation">(</span>255,255,255,0.2<span class="token punctuation">)</span>,0 1px 2px <span class="token function">rgba</span><span class="token punctuation">(</span>0,0,0,0.05<span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token property">-moz-box-shadow</span><span class="token punctuation">:</span> inset 0 1px 0 <span class="token function">rgba</span><span class="token punctuation">(</span>255,255,255,0.2<span class="token punctuation">)</span>,0 1px 2px <span class="token function">rgba</span><span class="token punctuation">(</span>0,0,0,0.05<span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token property">box-shadow</span><span class="token punctuation">:</span> inset 0 1px 0 <span class="token function">rgba</span><span class="token punctuation">(</span>255,255,255,0.2<span class="token punctuation">)</span>,0 1px 2px <span class="token function">rgba</span><span class="token punctuation">(</span>0,0,0,0.05<span class="token punctuation">)</span><span class="token punctuation">;</span>
     <span class="token punctuation">}</span>

     <span class="token selector">input[type=radio]:checked + label</span> <span class="token punctuation">{</span>
             <span class="token property">background-image</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
          <span class="token property">outline</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
          <span class="token property">-webkit-box-shadow</span><span class="token punctuation">:</span> inset 0 2px 4px <span class="token function">rgba</span><span class="token punctuation">(</span>0,0,0,0.15<span class="token punctuation">)</span>,0 1px 2px <span class="token function">rgba</span><span class="token punctuation">(</span>0,0,0,0.05<span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token property">-moz-box-shadow</span><span class="token punctuation">:</span> inset 0 2px 4px <span class="token function">rgba</span><span class="token punctuation">(</span>0,0,0,0.15<span class="token punctuation">)</span>,0 1px 2px <span class="token function">rgba</span><span class="token punctuation">(</span>0,0,0,0.05<span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token property">box-shadow</span><span class="token punctuation">:</span> inset 0 2px 4px <span class="token function">rgba</span><span class="token punctuation">(</span>0,0,0,0.15<span class="token punctuation">)</span>,0 1px 2px <span class="token function">rgba</span><span class="token punctuation">(</span>0,0,0,0.05<span class="token punctuation">)</span><span class="token punctuation">;</span>
               <span class="token property">background-color</span><span class="token punctuation">:</span>#e0e0e0<span class="token punctuation">;</span>
     <span class="token punctuation">}</span>

Demo


JSFiddle: http://jsfiddle.net/viralpatel/p499h/

Читайте также  Ping-pong игра средствами HTML, CSS, JavaScript.

The Checkboxes

Same technique can be applied on checkboxes. Just replace

type=radio

with

type=checkbox

in above CSS and see how normal looking html checkbox changes into pushbutton checkbox.

Demo

The code is available on JSFiddle.
Play on JSFiddle: http://jsfiddle.net/viralpatel/p499h/

Экспорт товаров в Google Merchant В виду начинающей популярности сервиса Google Merchant сделаем выгрузку (экспорт) прайс листа нашего интернет-магазина для Simpla. ...
Равномерное выравнивание блоков по ширине.... css #elsewhere { background-color: #222; } .zone { padding-left: 1.25rem; padding-right: 1.25rem; margin-left: -1.25rem; margin-right: -1....
Универсальный виджет get_products. Simpla CMS... Порой есть необходимость получить список товаров по какому-то определенному критерию, будь-то товары схожего бренда в карточке товаров, или новинки ко...
Указываем телефон в настройках Simpla... Намного удобнее указывать телефон только в одном месте, ведь если номер поменяется — удобнее поменять только в настройках в админке, че...

Сохрани, чтобы не потерять