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.

<code class=" language-markup"><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>
</code>

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:

<code class=" language-css"><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>
</code>

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.

<code class=" language-css"><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>
</code>

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 😀

<code class=" language-css"><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>
</code>

Demo


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

Читайте также  Выбор количества товара перед помещением в корзину Simpla

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/

Простой и приятный шрифт Простой и приятный шрифт. font: 16px/1.5 "PT Sans",Arial,sans-serif; font-size: 14px; color: #837666; /* font-weight: bold; */
Добавление поле бренд и артикул в файл экспорта ya... Данный вид выгрузки позволяет лучше ассоциировать карточки товаров в Яндекс.Маркете. Находим в файле yandex.php строки $simpla->db...
Simpla валюта через select {if $currencies|count>1} {foreach from=$currencies item=c} {if $c->enabled} id==$currency->id} selected="selected"{/if}>{$c->name|esca...
Выгружаем в Яндекс Маркет только первый вариант то... Иногда необходимо выгружать в Яндекс Маркет только первый вариант товара. Данное решение поможет решить эту задачу. Открываем файл yandex.php, ище...

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