表單樣式美化--複選框和單選按鈕

HTML代碼：

<code>&lt;!DOCTYPE html&gt;</code>

<code>&lt;</code><code>html</code> <code>lang</code><code>=</code><code>"zh-CN"</code><code>&gt;</code>

<code>&lt;</code><code>head</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>meta</code> <code>charset</code><code>=</code><code>"utf-8"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>meta</code> <code>http-equiv</code><code>=</code><code>"X-UA-Compatible"</code> <code>content</code><code>=</code><code>"IE=edge"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>meta</code> <code>name</code><code>=</code><code>"viewport"</code> <code>content</code><code>=</code><code>"width=device-width, initial-scale=1"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>title</code><code>&gt;&lt;/</code><code>title</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>link</code> <code>href</code><code>=</code><code>"//cdn.bootcss.com/bootstrap/3.0.3/css/bootstrap.min.css"</code> <code>rel</code><code>=</code><code>"stylesheet"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>link</code> <code>href</code><code>=</code><code>"//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css"</code> <code>rel</code><code>=</code><code>"stylesheet"</code><code>/&gt;</code>

<code>&lt;/</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>body</code><code>&gt;</code>

<code>&lt;</code><code>form</code> <code>action</code><code>=</code><code>""</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>label</code> <code>class</code><code>=</code><code>"checkbox"</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>input</code> <code>type</code><code>=</code><code>"checkbox"</code> <code>class</code><code>=</code><code>"original"</code> <code>name</code><code>=</code><code>"checkbox"</code> <code>value</code><code>=</code><code>"xuanzhong"</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>span</code> <code>class</code><code>=</code><code>"new"</code><code>&gt;checkbox&lt;/</code><code>span</code><code>&gt;</code>

<code>    </code><code>&lt;/</code><code>label</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>label</code> <code>class</code><code>=</code><code>"radio"</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>input</code> <code>name</code><code>=</code><code>"radioOption"</code> <code>type</code><code>=</code><code>"radio"</code> <code>class</code><code>=</code><code>"original"</code> <code>value</code><code>=</code><code>"radio1"</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>span</code> <code>class</code><code>=</code><code>"new"</code><code>&gt;</code>

<code>        </code><code>radio1</code>

<code>    </code><code>&lt;/</code><code>span</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>input</code> <code>name</code><code>=</code><code>"radioOption"</code> <code>type</code><code>=</code><code>"radio"</code> <code>class</code><code>=</code><code>"original"</code> <code>value</code><code>=</code><code>"radio2"</code><code>&gt;</code>

<code>        </code><code>radio2</code>

<code>    </code><code>&lt;</code><code>button</code> <code>type</code><code>=</code><code>"submit"</code> <code>class</code><code>=</code><code>"btn btn-success"</code><code>&gt;送出&lt;/</code><code>button</code><code>&gt;</code>

<code>&lt;/</code><code>form</code><code>&gt;</code>

<code>&lt;/</code><code>body</code><code>&gt;</code>

<code>&lt;/</code><code>html</code><code>&gt;</code>

CSS代碼：

<code>/*給原始的複選框和單選按鈕設定樣式*/</code>

<code>input[type=checkbox].original, input[type=radio].original {</code>

<code>   </code><code>opacity: </code><code>0</code><code>;</code>

<code>   </code><code>z-index</code><code>: </code><code>1</code><code>;</code>

<code>   </code><code>width</code><code>: </code><code>18px</code><code>;</code>

<code>   </code><code>height</code><code>: </code><code>18px</code><code>;</code>

<code>   </code><code>cursor</code><code>: </code><code>pointer</code><code>;</code>

<code>}</code>

<code>/*給新的複選框和單選按鈕設定同樣的大小*/</code>

<code>input[type=checkbox].original + .new, input[type=radio].original + .new {</code>

<code>   </code><code>display</code><code>: inline-</code><code>block</code><code>;</code>

<code>   </code><code>margin</code><code>: </code><code>0</code><code>;</code>

<code>   </code><code>line-height</code><code>: </code><code>20px</code><code>;</code>

<code>   </code><code>min-height</code><code>: </code><code>18px</code><code>;</code>

<code>   </code><code>min-width</code><code>: </code><code>18px</code><code>;</code>

<code>   </code><code>font-weight</code><code>: </code><code>normal</code><code>;</code>

<code>/*把原始的複選框和單選按鈕徹底隐藏起來*/</code>

<code>label input[type=checkbox].original, label input[type=radio].original {</code>

<code>   </code><code>z-index</code><code>: </code><code>-100</code> <code>!important</code><code>;</code>

<code>   </code><code>width</code><code>: </code><code>0</code> <code>!important</code><code>;</code>

<code>   </code><code>height</code><code>: </code><code>0</code> <code>!important</code><code>;</code>

<code>/*徹底去掉原始的複選框和單選按鈕選中時的邊框輪廓*/</code>

<code>input[type=checkbox].original:checked, input[type=radio].original:checked, input[type=checkbox].original:focus, input[type=radio].original:focus {</code>

<code>   </code><code>outline</code><code>: </code><code>none</code> <code>!important</code><code>;</code>

<code>/*新的複選框和單選按鈕公共樣式*/</code>

<code>input[type=checkbox].original + .new::before, input[type=radio].original + .new::before {</code>

<code>   </code><code>font-family</code><code>: fontAwesome;</code>

<code>   </code><code>font-size</code><code>: </code><code>12px</code><code>;</code>

<code>   </code><code>color</code><code>: </code><code>#32a3ce</code><code>;</code>

<code>   </code><code>content</code><code>: </code><code>"\a0"</code><code>;</code>

<code>   </code><code>background-color</code><code>: </code><code>#FAFAFA</code><code>;</code>

<code>   </code><code>border</code><code>: </code><code>1px</code> <code>solid</code> <code>#c8c8c8</code><code>;</code>

<code>   </code><code>box-shadow: </code><code>0</code> <code>1px</code> <code>2px</code> <code>rgba(</code><code>0</code><code>, </code><code>0</code><code>, </code><code>0</code><code>, </code><code>0.05</code><code>);</code>

<code>   </code><code>border-radius: </code><code>0</code><code>;</code>

<code>   </code><code>text-align</code><code>: </code><code>center</code><code>;</code>

<code>   </code><code>height</code><code>: </code><code>16px</code><code>;</code>

<code>   </code><code>line-height</code><code>: </code><code>14px</code><code>;</code>

<code>   </code><code>min-width</code><code>: </code><code>16px</code><code>;</code>

<code>   </code><code>margin-right</code><code>: </code><code>1px</code><code>;</code>

<code>/*新的單選按鈕單獨樣式*/</code>

<code>input[type=radio].original + .new::before {</code>

<code>   </code><code>border-radius: </code><code>100%</code><code>;</code>

<code>   </code><code>font-size</code><code>: </code><code>10px</code><code>;</code>

<code>   </code><code>text-shadow</code><code>: </code><code>0</code> <code>0</code> <code>1px</code> <code>#32a3ce</code><code>;</code>

<code>   </code><code>line-height</code><code>: </code><code>16px</code><code>;</code>

<code>   </code><code>height</code><code>: </code><code>17px</code><code>;</code>

<code>   </code><code>min-width</code><code>: </code><code>17px</code><code>;</code>

<code>/*新的複選框和單選按鈕hover時邊框的樣式*/</code>

<code>input[type=checkbox].original:hover + .new::before, input[type=radio].original:hover + .new::before, input[type=checkbox].original + .new:hover::before, input[type=radio].original + .new:hover::before {</code>

<code>   </code><code>border-color</code><code>: </code><code>#ff893c</code><code>;</code>

<code>/*新的複選框選中的樣式*/</code>

<code>input[type=checkbox].original:checked + .new::before, input[type=radio].original:checked + .new::before {</code>

<code>   </code><code>content</code><code>: </code><code>'\f00c'</code><code>;</code>

<code>   </code><code>background-color</code><code>: </code><code>#f9a021</code><code>;</code>

<code>   </code><code>border-color</code><code>: </code><code>#f9a021</code><code>;</code>

<code>   </code><code>color</code><code>: </code><code>#FFF</code><code>;</code>

<code>   </code><code>box-shadow: </code><code>0</code> <code>1px</code> <code>2px</code> <code>rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0.05</code><code>),</code><code>inset</code> <code>0</code> <code>-15px</code> <code>10px</code> <code>-12px</code> <code>rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0.05</code><code>),</code><code>inset</code> <code>15px</code> <code>10px</code> <code>-12px</code> <code>rgba(</code><code>255</code><code>,</code><code>255</code><code>,</code><code>255</code><code>,</code><code>0.1</code><code>);</code>

<code>/*新的單選按鈕選中的樣式*/</code>

<code>input[type=radio].original:checked + .new::before {</code>

<code>   </code><code>content</code><code>: </code><code>"\f111"</code><code>;</code>

運作效果截圖：

<a href="https://s4.51cto.com/wyfs02/M00/9B/06/wKioL1lddtCzoXRCAABixRhJ0xQ158.gif" target="_blank"></a>

從效果圖中可以看到，不僅傳統的checkbox 和 radio樣式改變了，而且最重要的是送出表單時，name和value屬性一樣可以正常擷取

當然，這種用法依賴于bootstrap 和 fontawssome，如果沒有這兩個引用的話，是無法實作的

本文轉自   frwupeng517   51CTO部落格，原文連結:http://blog.51cto.com/dapengtalk/1944884