純CSS設定Checkbox複選框控制元件的樣式
在本教程中,我們將建立5個不同的選擇框,你可以在你的網站上使用它。
首先,需要新增一段CSS隱藏所有的Checkbox複選框,下面我們會改變它的外觀。要做到點需要新增一段程式碼到你的CSS檔案中。
/** * 隱藏預設的checkbox */
input[type=checkbox] { visibility: hidden; }
隱藏掉所有的Checkbox複選框後,我們需要新增一個label
HTML元素,我們都知道,當點選的有for
屬性的label
標籤時,對應的Checkbox
複選框會被選中。這意味著,我們可以通過label
的點選事件來處理我們的Checkbox
複選框。
樣式一
此複選框風格就像一個解鎖滑塊,滑塊選中和未選中狀態會顯示在的不同位置。當單擊滑塊按鈕(label
標籤),將會選中複選框,然後滑塊移動到ON位置。
我們開始建立複選框區的HTML。
<div class="checkboxOne"> <input type="checkbox" value="1" id="checkboxOneInput" name="" /> <label for="checkboxOneInput"></label> </div>
因為這個樣式的複選框,一個label不足以完成任務,我們用一個DIV元素包含checkbox,我們需要使用它們來做黑色條帶和圓角。
.checkboxOne { width: 40px; height: 10px; background: #555; margin: 20px 80px; position: relative; border-radius: 3px; }
現在,我們可以把label作為條帶上的滑塊,我們希望按鈕效果是從條帶的一側移動到另一側,我們可以新增label的過渡。
.checkboxOne label { display: block; width: 16px; height: 16px; border-radius: 50%; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; cursor: pointer; position: absolute; top: -3px; left: -3px; background: #ccc; }
現在這個滑塊在選中(關閉)位置,當我們選中複選框,我們希望有一個反應發生,所以我們可以移動滑塊到另一端。我們需要知道,判斷複選框被選中,如果是則改變label元素的left屬性。
.checkboxOne input[type=checkbox]:checked + label { left: 27px; }
樣式二
此複選框風格像樣式一樣,但不同的是,這個滑塊按鈕會改變顏色。當您單擊滑塊按鈕,它移動到條帶的另一邊,並改變按鈕的顏色。
<div class="checkboxTwo"> <input type="checkbox" value="1" id="checkboxTwoInput" name="" /> <label for="checkboxTwoInput"></label> </div>
這個DIV會變成比樣式一大一些的條帶,label依然是作為滑塊,使用下面的CSS來定義它。
.checkboxTwo { width: 120px; height: 40px; background: #333; margin: 20px 60px; border-radius: 50px; position: relative; }
這個樣式中間有一個黑色的條,滑塊會沿著它左右滑動,但是DIV元素已經使用了,所以我們需要用:before
偽類建立一個新的元素。
.checkboxTwo:before { content: ''; position: absolute; top: 19px; left: 14px; height: 2px; width: 90px; background: #111; }
和樣式一一樣,接下來我們為label寫CSS樣式,把它用作滑塊。
.checkboxTwo label { display: block; width: 22px; height: 22px; border-radius: 50%; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; cursor: pointer; position: absolute; top: 9px; z-index: 1; left: 12px; background: #ddd; }
我要實現和樣式一差不多的選中狀態,當選中時改變label的left和background屬性。
.checkboxTwo input[type=checkbox]:checked + label { left: 84px; background: #26ca28; }
樣式三
這個複選框的樣式比樣式二更復雜一些,它和前面的例子一樣會左右滑動,並且當改變選中和未選中的狀態時,滑塊滑動到另一側並且在原位置顯示對應的文字。
<div class="checkboxThree"> <input type="checkbox" value="1" id="checkboxThreeInput" name="" /> <label for="checkboxThreeInput"></label> </div>
然後,我們用相同的方式把div作為滑塊,下面的程式碼會建立一個黑色圓角的條帶,我們可以把滑塊和文字放到裡面。
.checkboxThree {
width: 120px;
height: 40px;
background: #333;
margin: 20px 60px;
border-radius: 50px;
position: relative;
}
當滑塊處於未選中狀態時,滑塊會在左側,並且右邊顯示”OFF”,當點選的時候,滑塊移動到右側,左側顯示”ON”。
但是元素數量不足以讓我們實現這些功能,所以我們要用:before
和:after
兩個偽類建立兩個元素,分別放置”ON”和”OFF”。
.checkboxThree:before { content: 'On'; position: absolute; top: 12px; left: 13px; height: 2px; color: #26ca28; font-size: 16px; }
.checkboxThree:after { content: 'Off'; position: absolute; top: 12px; left: 84px; height: 2px; color: #ddd; font-size: 16px; }
和前面一樣,我們來新增滑塊的樣式,當被點選時它會移動到另一側,並且改變顏色。
.checkboxThree label { display: block; width: 52px; height: 22px; border-radius: 50px; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; cursor: pointer; position: absolute; top: 9px; z-index: 1; left: 12px; background: #ddd; }
.checkboxThree input[type=checkbox]:checked + label { left: 60px; background: #26ca28; }
樣式四
在這個樣式中,我們會建立兩個圓形,當點選時改變裡面的圓形的顏色表示選中與未選中的狀態。
<div class="checkboxFour"> <input type="checkbox" value="1" id="checkboxFourInput" name="" /> <label for="checkboxFourInput"></label> </div>
接下來我們要為checkbox建立外面的圓形,使用CSS的border-radius
屬性,並且設定為100%就可以建立一個正圓形。
.checkboxFour { width: 40px; height: 40px; background: #ddd; margin: 20px 90px; border-radius: 100%; position: relative; -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5); -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5); box-shadow: 0px 1px 3px rgba(0,0,0,0.5); }
然後我們用label元素來建立一個小一點的圓形,它會根據checkbox狀態來改變顏色。
.checkboxFour label { display: block; width: 30px; height: 30px; border-radius: 100px; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; cursor: pointer; position: absolute; top: 5px; left: 5px; z-index: 1; background: #333; -webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5); -moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5); box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5); }
當複選框被選中的時候,我們要改變內圈的背景顏色來表示選中狀態。
.checkboxFour input[type=checkbox]:checked + label { background: #26ca28; }
樣式五
這個複選框的樣式有些不同,它看起來只是比瀏覽器預設的checkbox樣式稍微好了些,但是不同的是我們可以根據自己的需要來定義它的樣式了。
<div class="checkboxFive"> <input type="checkbox" value="1" id="checkboxFiveInput" name="" /> <label for="checkboxFiveInput"></label> </div>
在前面的例子中,我們把div作為checkbox的滑動條帶或者外部的圓圈,但是這一次我們不需要了,可以使用div元素來設定複選框的區域。
.checkboxFive { width: 25px; margin: 20px 100px; position: relative; }
label標籤用於Click事件和我們要定義的複選框的方框樣式。
.checkboxFive label { cursor: pointer; position: absolute; width: 25px; height: 25px; top: 0; left: 0; background: #eee; border:1px solid #ddd; }
接下來,我們要建立方框中的對勾,對於這一點,我們可以使用:after
偽類建立一個新的元素,為了實現這個樣式,我們可以建立一個5px x 9px的長方形並給他加上邊框。這時候我們去掉上面和右邊的邊框之後,它會看起來像一個字母L。然後我們可以使用CSS的transform
屬性讓它旋轉一下,這樣看起來就像是一個對勾。
.checkboxFive label:after { opacity: 0.2; content: ''; position: absolute; width: 9px; height: 5px; background: transparent; top: 6px; left: 7px; border: 3px solid #333; border-top: none; border-right: none; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
在上面的CSS中,我們已經設定它的透明度為0.2,所以你會看到的複選框有一個半透明的對勾。你可以在懸停的時候加深一點,在選中時,可以把設定為不透明。
.checkboxFive label:hover::after { opacity: 0.5; }
.checkboxFive input[type=checkbox]:checked + label:after { opacity: 1; }
這將會為你建立全新的checkbox複選框樣式。
相關推薦
純CSS設定Checkbox複選框控制元件的樣式
在本教程中,我們將建立5個不同的選擇框,你可以在你的網站上使用它。 首先,需要新增一段CSS隱藏所有的Checkbox複選框,下面我們會改變它的外觀。要做到點需要新增一段程式碼到你的CSS檔案中。 /** * 隱藏預設的checkbox */ input[type=
Winform/C#入門程式設計之第二部分常用控制元件(四:複選框控制元件CheckBox)
簡介: 介紹複選框控制元件CheckBox。常用在某些功能的是否啟用判斷。 介紹: 1.屬性 常用屬性 Name 獲取或設定控制元件的名稱。
html中標籤用法解析及如何設定checkbox複選框的預設選中狀態
本文導語: html中<checkbox>標籤用法解析及如何設定checkbox複選框的預設選中狀態(由www.169it.com蒐集整理)html中複選框Checkbox物件代表一個 HTML 表單中的 一個選擇框。html中複選框Checkbox物件的屬性屬性 描述a...
金蝶bos 自定義UI介面新增複選框控制元件,並且做業務處理
/** * 顯示工程型別 * @author daihao * 
關於jsp頁面checkbox複選框的預設樣式的修改(自定義複選框樣式)
checkbox複選框的預設樣式太low,最近做的專案我選擇了自定義樣式,網上找了不少文章內容冗餘,並且並不是都有效果,所以將自己過程整理出來,以備後用。只要在jsp頁面和css樣式表中新增相應程式碼即可:一、jsp頁面:<div class="container"&g
最簡單清晰的純css實現的單選框radio複選框checkbox自定義樣式
<fieldset> <legend style="color: red;">自定義單選框radio</legend> <div cla
Axure RP Pro 相關問題 checkbox複選框部件的OnClick事件中複選框的狀態已發生了改變
分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!  
Vue中CheckBox複選框實現單選效果
為什麼有radio不用,偏偏要使用CheckBox實現單選效果呢? 答案是如果想同時實現單選,又實現可以一個都不選的話。只能使用CheckBox來做了。 通過jQuery來做 實現思路: 1.如果當前物件不選中:去除當前物件的選中狀態 2.如果當前物件選中:
jquery對radio單選框和CheckBox複選框的操作
radio單選:輸出選擇的值。 checkbox複選及全選:判斷是否為全選,輸出選擇的值。 我用的jq版本為1.11版 程式碼如下: html <body> <div id="select-only-one"> <input
Django中checkbox複選框的傳值問題
Django 中,html 頁面通過 form 標籤來傳遞表單資料。 對於複選框資訊,即 checkbox 型別,點選 submit 後,資料將提交至 view 中的函式。 我們通過request.POST.get() 函式來獲取來自 html 頁面的值,但是該函式只能 get 到
Dtree 新增 checkbox 複選框
一:目標 要實現用一個樹形結構的展示資料,每個節點(除了根節點)前有一個checkbox,同時,點選父節點,則子節點全選或者全不選,當選中了全部子節點,父節點選中;如下圖所示: 注:本人把顯示圖示改成了false(個人覺得不好看),想用圖示的話可以不用修改原始檔, useIcons :
vue基於element-ui的三級CheckBox複選框
最近vue專案需要用到三級CheckBox複選框,需要實現全選反選不確定三種狀態。但是element-ui table只支援多選行,並不能支援三級及以上的多選,所以寫了這篇部落格以後學習使用。 效果圖預覽: 首先是頁面佈局,當然也可已使用table,但是自己用flex佈局後面更容易增刪改查其他功能 1
extjs4 treepanel checkbox 複選框
原部落格地址:https://blog.csdn.net/cdmamata/article/details/47001633?utm_source=blogxgwz4 Extjs4 treePanel checkBox 多選框全
CheckBox複選框的
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="你最大的夢想是:" android:textColor="#0
input checkbox複選框取值
<table> <!--列表表頭 開始 --> <tr class="ui-widget ui-state-hover" style="height: 36px;"> <th><inpu
提交表單中Select列表或Checkbox複選框的多個值到Struts2 Action
以提交Select列表的值為例。 1.HTML寫法: <select name="authorizedUsers" id="authorizedUsers" multiple="multiple"> <option value="1">
input checkbox 複選框大小修改
有的時候,需要使用複選框,但是複選框有時候預設的太小,這時候就需要加大複選框,網上搜了很多,都沒有直接的解決方法, 一種是採用div 擴大點選範圍或者是採用圖片替代。 直到看到下面一篇介紹,使用了下,才可以達到我想要的效果,試了下ie和谷歌都支援。 參考 https:/
LayaAir UI 元件 # CheckBox 複選框
目錄 CheckBox 元件 預設checkbox 資源 自定義元件面板 獲取選中狀態 CheckBox 元件 Package laya.ui 類 public class CheckBo
checkBox複選框,獲得選中那一行所有列的資料
function showCol(){ var check=$("input[name='one']:checked");//選中的複選框 check.each(function(){ va
AngularJS判斷checkbox/複選框是否選中並實時顯示
最近因為專案原因重新撿起來了AngularJS ,遇到老問題複選框選中和值的問題。 先貼以前網上找的解決方案 http://www.cnblogs.com/CheeseZH/p/4517701.html 個人感覺太麻煩了,程式碼太多,然後自己找了點資料,現在如下自己的解決方