純css製作漂亮的複選框與單選按鈕

我們都知道html中原生的checkbox與radio樣式是非常的丑,而且怎麼美化都不好看,很多前端工程師都會用設計好的2張圖片去模擬複選框與單選按鈕,這種方法可以實現好看的複選框與單選按鈕,但是要更改樣式還需要重新做圖也是比較麻煩的。今天給大家推薦一種純css+html實現好看的複選框與單選按鈕,而且可以靈活美化樣式,請看效果圖,如果大家覺得不好看完全可以自己改改css樣式。

工具/原料

前端工具HBuilder
css+html

方法/步驟

html代碼如下:

<body>

<h2>複選框</h2>

<div>

語文<input type="checkbox" id="語文" class="gcs-checkbox">

<label for="語文"></label>

數學<input type="checkbox" id="數學" class="gcs-checkbox">

<label for="數學"></label>

英語<input type="checkbox" id="英語" class="gcs-checkbox">

<label for="英語"></label>

計算機<input type="checkbox" id="計算機" class="gcs-checkbox">

<label for="計算機"></label>

</div> <br />

<hr />

<h2>單選按鈕</h2>

<div>

男<input type="radio" name="sex" class="gcs-radio" id="男" />

<label for="男"></label>

女<input type="radio" name="sex" class="gcs-radio" id="女" />

<label for="女"></label>

</div>

<hr />

</body>

樣式代碼如下:

<style type="text/css">

/*複選框*/

.gcs-checkbox {

display: none;

}

.gcs-checkbox+label {

background-color: white;

border-radius: 0px;

border: 1px solid #d3d3d3;

width: 20px;

height: 20px;

display: inline-block;

text-align: center;

vertical-align: bottom;

line-height: 20px;

}

.gcs-checkbox+label:hover {

cursor: pointer;

border: 1px solid #2783FB;

}

.gcs-checkbox:checked+label {

background-color: #eee;

background: #2783FB;

}

.gcs-checkbox:checked+label:after {

content: "\2714";

color: white;

}

/*單選按鈕*/

.gcs-radio {

display: none;

}

.gcs-radio+label {

width: 20px;

height: 20px;

line-height: 20px;

display: inline-block;

text-align: center;

vertical-align: bottom;

border: 1px solid gray;

border-radius: 50%;

}

.gcs-radio+label:hover {

border: 1px solid #2783FB;

cursor: pointer;

}

.gcs-radio:checked+label {

background: #2783FB;

border: 1px solid #2783FB;

}

.gcs-radio:checked+label:after {

content: "\2022";

font-size: 35px;

color: white;

}

</style>

注意事項

我們這裡巧妙的利用label的for屬性去模擬checkbox與radio的單擊事件
label 的for屬性必須與checkbox或radio的id相同

相關文章

  1. wps表格基礎之製作帶√的複選框

    想不想製作一個只需要點擊一下,就會出現√的複選框電子表格?下面就跟這小編一起來學習一下吧! 工具/原料 wps表格2013 方法/步驟 雙擊並打開wps表格. 先讓我們看一下我們需要製作的最終效果.只 ...
  2. 智能報表軟體FineReport中如何製作下拉複選框

    下面就通過智能報表軟體FineReport來介紹一下如何製作. 工具/原料 智能報表軟體FineReport7.1.1 大小:148.2M 適用平台:windows/linux 方法/步驟 下拉複選框 ...
  3. 智能報表系統FineReport中如何製作下拉複選框

    下面就通過智能報表系統FineReport來介紹一下如何製作. 工具/原料 智能報表系統FineReport7.1.1 大小:148.2M 適用平台:windows/linux 方法/步驟 下拉複選框 ...
  4. word 2013實用技巧---製作打勾複選框

    "複選框內容控制項"是重要的控制項工具之一.在word文檔中插入複選框,設置控制項屬性,即可設計複選框的選中標記和未選中標記.相信這一技巧一定會幫到大家的! 工具/原料 電腦 Micro ...
  5. bi報表工具FineReport中如何製作下拉複選框

    下面就通過bi報表工具FineReport來介紹一下如何製作. 工具/原料 bi報表工具FineReport7.1.1 大小:148.2M 適用平台:windows/linux 方法/步驟 下拉複選框 ...
  6. 在word中製作打勾複選框

    "複選框內容控制項"是重要的控制項工具之一.在word文檔中插入複選框,設置控制項屬性,即可設計複選框的選中標記和未選中標記. 工具/原料 電腦一台 word 2007以上版本 方法/步 ...
  7. 智能報表工具FineReport中如何製作下拉複選框

    下面就通過智能報表工具FineReport來介紹一下如何製作. 工具/原料 智能報表工具FineReport7.1.1 大小:148.2M 適用平台:windows/linux 方法/步驟 下拉複選框 ...
  8. html和css中如何自定義複選框和單選框

    本篇介紹html和css中如何自定義複選框和單選框. 方法/步驟 默認的複選框如圖. 可以通過偽類和label標籤來實現.首先使用偽元素:before添加一個"複選框".如圖. 查 ...
  9. html+css+jq自定義複選框和單選按鈕

    html+css+jq自定義複選框和單選按鈕 工具/原料 adobe dreamweaver 方法/步驟 新建html文檔. 書寫hmtl代碼. <div style="margin: ...
  10. wps表格中如何製作帶勾複選框?

    在製作電子簡歷.問卷調查時,難免會碰到帶方框的選項,即在方框內直接勾選,如圖所示.其實用wps表格來製作這種複選框是非常方便的,跟著我做吧 ! 工具/原料 電腦 wps表格 方法/步驟 我們製作個人簡 ...
  11. Word中怎麼製作打勾複選框

    平時在編輯word時會需要製作打勾的複選框,也許很多朋友還不知道怎麼設置,本教程就為大家介紹具體操作過程,下面就一起來看看吧.我們以Word2010版來演示word複選框打勾的整個操作過程. 工具/原 ...
  12. 利用layui,實現漂亮的複選框

    在頁面開發時,我們會經常用到複選框的,默認的複選框都是千篇一律的,不太好看.下面我們就來看一下怎麼實現一個漂亮的複選框,使用layui這個前端庫就行了. 方法/步驟 首先需要引入layui的js腳本文 ...
  13. 在Word2003文檔窗口中使用複選框或單選按鈕

    在Word2003中,對話框中的選項按鈕分為單選按鈕和複選框兩種類型. 步驟/方法 其中複選框一般成組出現,在選取時用戶可以一次性選擇多個複選框.被選中的複選框中將標記有√符號,再單擊一次可取消選擇, ...
  14. 怎樣在Word2003文檔窗口中使用複選框或單選按鈕

    怎樣在Word2003文檔窗口中使用複選框或單選按鈕? 步驟/方法 在Word2003中,對話框中的選項按鈕分為單選按鈕和複選框兩種類型.其中複選框一般成組出現,在選取時用戶可以一次性選擇多個複選框. ...
  15. MFC應用實例:[40]複選框,單選按鈕

    實現複選框Check Box,單選按鈕Radio Button的使用. 工具/原料 Microsoft Visual Studio 2010 方法/步驟 新建一個基於對話框的應用程式,應用程式名稱為C ...
  16. VB入門教程:[16]使用複選框和單選按鈕

    在本課中,您將學習如何使用複選框和單選按鈕來提供和檢索用戶選擇.首先要認識一下Check控制項,這個比較簡單,大家可以自己看. 工具/原料 VB2008 聯網電腦一台 試一試[使用複選框] 興建一個名為 ...
  17. html+CSS3實現複選框和單選按鈕美化

    html+CSS3實現複選框和單選按鈕美化 工具/原料 adobe dreamweaver 方法/步驟 新建html文檔. 書寫hmtl代碼. <div id="holder" ...
  18. jQuery:checked選取所有選中的複選框或單選按鈕

    jQuery:checked 選擇器選取所有選中的複選框或單選按鈕 工具/原料 Dreamweaver.exe 方法/步驟 新建html文件 創建form表單 創建按鈕 預覽效果如圖 引入jquery ...
  19. 怎樣在excel中製作複選框☑按鈕

    網友提問:最近在弄excel文件的時候  老是遇到很多要勾選的  自己一點擊滑鼠就會勾選上了呢  心疑問這  怎麼不用自己插入一個√呢  嗯  其實這是一個複選框按鈕☑  一點擊就會自動給你勾上的啦 ...
  20. Excel中製作帶複選框的動態圖表

    我們在製作圖表的時候,難以避免的總會出現多個維度的數據混在一起,做出來的圖數據擠在一起,既不利於觀看又影響美觀,所以應用到了excel中的控制項 工具/原料 演示數據 Excel 方法/步驟 如圖,複製 ...