純css3實現美化複選框和手風琴效果(詳細)
關鍵技術點和原理:
原理就是把 checkbox或 radio 給隱藏掉 ,然後給選框 繫結一個label標籤。
然後用label標籤作為容器,在裡面放一個:before或一個after
用before模擬選框的框,用after來模擬選框的填充
通過
.magic-checkbox:checked + label:after {/*選框被選中時 顯示after填充*/
display: block;
}
來確定是否選中複選框,如果checked就把after的顯示。
先貼出html的程式碼
<div id="main"> <div class="demo"> <div class="col"> <h4>Checkbox(複選按鈕)</h4> <div class="opt"> <input class="magic-checkbox" type="checkbox" name="layout" id="c1"> <label for="c1">Normal</label> </div><div class="opt"> <input class="magic-checkbox" type="checkbox" name="layout" id="c2" checked> <label for="c2">Checked</label> </div> <div class="opt"> <input class="magic-checkbox"type="checkbox" name="layout" id="c3" value="option2" disabled> <label for="c3" style="color:#ccc">Disabled</label> </div> <div class="opt"> <input class="magic-checkbox" type="checkbox" name="layout" id="c4" checked disabled> <label for="c4" style="color:#ccc">Checked && Disabled</label> </div> </div> <div class="col"> <h4>Radio(單選按鈕)</h4> <div class="opt"> <input class="magic-radio" type="radio" name="radio" id="r1" value="option1"> <label for="r1">Normal</label> </div> <div class="opt"> <input class="magic-radio" type="radio" name="radio" id="r2" value="option2" checked> <label for="r2">Checked</label> </div> <div class="opt"> <input class="magic-radio" type="radio" name="radio" id="r3" value="option3" disabled> <label for="r3" style="color:#ccc">禁用</label> </div> <div class="opt"> <input class="magic-radio" type="radio" id="r4" value="option4" checked disabled> <label for="r4" style="color:#ccc">Checked && Disabled</label> </div> </div> </div> </div>
首先html的結構必須是
<div class="opt">
<input class="magic-checkbox" type="checkbox" name="layout" >
<label for="c1">Normal</label>
</div>
切記
<input class="magic-checkbox" type="checkbox" name="layout" color: #ff6600">c1">
<label for="c1">Normal</label>
id和for的值一定要一致 這是通用寫法 為了把label和input繫結在一塊
下面給出css程式碼
/*--相關的單選複選按鈕--*/ @keyframes hover-color { /**複選框或單選框 邊框 hover**/ from { border-color: #c0c0c0; } to { border-color: #3e97eb; } } .magic-radio, .magic-checkbox { /**必須要把 radio和 checkbox的隱藏或者切割掉**/ position: absolute; display: none; } .magic-radio[disabled], /**radio checkbox 指定disabled html屬性時的滑鼠指標**/ .magic-checkbox[disabled] { cursor: not-allowed; } .magic-radio + label, .magic-checkbox + label { position: relative; display: block; padding-left: 30px; cursor: pointer; vertical-align: middle; } .magic-radio + label:hover:before, /*選礦的 hover邊框動畫 */ .magic-checkbox + label:hover:before { animation-duration: 0.4s; animation-fill-mode: both; animation-name: hover-color; } .magic-radio + label:before, .magic-checkbox + label:before {/*用before來模擬選框的框*/ position: absolute; top: 0; left: 0; display: inline-block; width: 20px; height: 20px; content: ''; border: 1px solid #c0c0c0; } .magic-radio + label:after, .magic-checkbox + label:after {/*用after模擬選框的 對號或園點 預設先隱藏*/ position: absolute; display: none; content: ''; } .magic-radio[disabled] + label, .magic-checkbox[disabled] + label {/*選框 被禁用時的外觀*/ cursor: not-allowed; color: #e4e4e4; } .magic-radio[disabled] + label:hover, .magic-radio[disabled] + label:before, .magic-radio[disabled] + label:after, .magic-checkbox[disabled] + label:hover, .magic-checkbox[disabled] + label:before, .magic-checkbox[disabled] + label:after { cursor: not-allowed; }/*禁用時的指標*/ .magic-radio[disabled] + label:hover:before, .magic-checkbox[disabled] + label:hover:before { border: 1px solid #e4e4e4; animation-name: none; }/*禁用時的選框和填充*/ .magic-radio[disabled] + label:before, .magic-checkbox[disabled] + label:before { border-color: #e4e4e4; } .magic-radio:checked + label:before, .magic-checkbox:checked + label:before { animation-name: none; }/*選框被選中時 去掉hover 動畫*/ .magic-radio:checked + label:after, .magic-checkbox:checked + label:after {/*選框被選中時 顯示after填充*/ display: block; } .magic-radio + label:before {/*radio的選框應該是個圓形*/ border-radius: 50%; } .magic-radio + label:after {/*模擬出radio的園點填充*/ top: 7px; left: 7px; width: 8px; height: 8px; border-radius: 50%; background: #3e97eb; } .magic-radio:checked + label:before { border: 1px solid #3e97eb; } .magic-radio:checked[disabled] + label:before { border: 1px solid #c9e2f9; } .magic-radio:checked[disabled] + label:after { background: #c9e2f9; } .magic-checkbox + label:before { border-radius: 3px; } .magic-checkbox + label:after {/*模擬出checkbox選框的對號填充*/ top: 2px; left: 7px; box-sizing: border-box; width: 6px; height: 12px; transform: rotate(45deg); border-width: 2px; border-style: solid; border-color: #fff; border-top: 0; border-left: 0; } .magic-checkbox:checked + label:before { border: #3e97eb; background: #3e97eb; } .magic-checkbox:checked[disabled] + label:before { border: #c9e2f9; background: #c9e2f9; }
下面是 程式碼執行效果
demo: 下面附贈一個手風琴效果(原理基本上也差不多) 也是在 :check的時候做一些事情 demo 用checkbox和radio實現手風琴效果相關推薦
純css3實現美化複選框和手風琴效果(詳細)
關鍵技術點和原理: 原理就是把 checkbox或 radio 給隱藏掉 ,然後給選框 繫結一個label標籤。 然後用label標籤作為容器,在裡面放一個:before或一個after 用before模擬選框的框,用after來模擬選框的填充 通過 .magic-ch
Asp.net中滿足條件的複選框自動被選中(一)
一、有這樣一種需求:給單個使用者分組,分兩步走 1)載入所有使用者組 2)當前使用者已在的分組的複選框被勾選上 二、下面先演示一下想要的效果: 1、給單個使用者分組,選擇使用者: 2、彈框 查詢所有分類列表;把已分組的複選框選中,效果圖如下:
Asp.net中滿足條件的複選框自動被選中(二)
被選複選框的靠前顯示 一、其他不多說,直接進入正題:我現在要把前一篇部落格中,被選中的複選框都靠前顯示,就是說要有圖一的效果做成圖二的效果: 二、實現思路 這也是一個難點,困擾了我很久,現在和大家一起分享: 實現思
使用CSS3美化複選框checkbox
方法一 :使用圖片 .checkbox { display: none; } .checkbox-i{ margin-right: 20px; background-image: url("../img/icon.png"); background-repeat: no-
最簡單清晰的純css實現的單選框radio複選框checkbox自定義樣式
<fieldset> <legend style="color: red;">自定義單選框radio</legend> <div cla
10個HTML5美化版複選框和單選框
單選框和複選框在網頁中也十分常見,雖然它沒有按鈕的互動性強,但是如果能把它們像按鈕那樣美化一下,那也是非常不錯的。本文收集了10個相對比較漂亮的美化版單選框和複選框,希望你會喜歡。 1、CSS3漂亮的自定義Checkbox複選框 9款迷人樣式 之前我們分享過一款非
使用css偽類,實現同類型複選框計數的效果
開始啦 最近發現一個css的小技巧。在以往,當我想要獲取checkbox的資料數量的時候,常規的做法是使用js遍歷checkbox陣列,定義變數達到統計數量的效果。現在使用css完全可以實現相同的效果,簡單便捷,在不操作DOM的情況下達到目的,嘻嘻 程式碼塊 這裡貼出相
如何新增一個空間引導同時選中複選框和標籤之間
我試圖新增20px複選框和標籤之間的空間引導同時選中複選框列表下面使用CSS,但不幸的是,它沒有得到應用。 HTML <body><select size="5" name="lstStates" multiple="multiple" id="lstStates"><opt
Java 100-006:選單欄的建立-包括巢狀選單,禁用選單項,複選框和單選按鈕選單項,彈出選單以及快捷鍵和加速器
package java01; import java.awt.*; import java.awt.event.*; import javax.swing.*; /** * 我的java每天100行程式碼006 * 選單欄的建立:包括巢狀選單,禁用選單項,複選框和單選按鈕選
小知識點:複選框和單選按鈕水平排列
執行效果如下或檢視右側結果視窗: 實現原始碼請檢視bootstrap.css檔案第1767行~第1780行: .radio-inline, .checkbox-inline { display: inline-block; padding-left: 20px; ma
純CSS設定Checkbox複選框控制元件的樣式
在本教程中,我們將建立5個不同的選擇框,你可以在你的網站上使用它。 首先,需要新增一段CSS隱藏所有的Checkbox複選框,下面我們會改變它的外觀。要做到點需要新增一段程式碼到你的CSS檔案中。 /** * 隱藏預設的checkbox */ input[type=
jquery實現帶複選框的表格行選中刪除時高亮顯示
/** * 設定含有複選框的表格中的背景色 */ $(document).ready(function() { /** * 表格行被單擊的時候改變背景色 */ $("#tablight tr:gt(0)").click(function() //獲取第2行後 { if ($(this)
用Jquery實現,複選框在修改時,根據資料庫選中複選框
<input type="checkbox" name="functiondtcx" value=1 >1 <input type="checkbox" name="functiondtcx" value=2 >2 <i
純css3實現斑馬線repeating-linear-gradient和linear-gradient的妙用
今天睡得太早,結果晚上12:45的時候就醒過來了。現在想起小時候,實在是羨慕,那時候9點鐘睡了,到早上上學的時候還是迷迷糊糊的要睡覺的感覺,現在特羨慕那時候那麼能睡。 今天是週一了,
用jq實現購物車複選框的互動功能
動態生成多行復選框 var count1=0; var count2=0; var t1 = $("#fun1"); $.getJSON("servlet/FindState",null,fun
bootstrap-table複選框預設選中。(從資料庫獲取到對應的狀態進行判斷是否為選中狀態)
$('#table').bootstrapTable('destroy'); $('#table').bootstrapTable({url:'../data/kehulist.json',uniqu
純Java實現控制檯對資料庫的增刪改查(Eclipse)
package com.hznu.qjc.daos; import com.hznu.qjc.users.*; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; impor
原生JS實現彩票36選7不重復(優化)
math utf-8 onclick indexof element 變量 元素 inner str <!doctype html> <html> <head> <meta charset="utf-8"> <titl
警告框和操作表(ActionSheet)
iOS 開發中,應用程式如何實現與使用者的交流呢?警告框和操作表就是為此設計的。 警告框時UIAlertView建立的,用於為使用者以警告或提示,最多有兩個按鈕,超過兩個就應該考慮使用操作表。由於在iOS中,警告框是”模態“(表示的是不關閉它就不能做別的事情),因此不應該隨
基於vue2.0實現仿百度前端分頁效果(二)
前言 上篇文章中,已經使用vue實現前端分頁效果,這篇文章我們單獨將分頁抽離出來實現一個分頁元件 先看實現效果圖 程式碼實現 按照慣例,我們在凍手實現的時候還是先想一想vue實現元件的思路 1、需要提前設定哪些引數需要暴露出來給父元件傳遞 <Paging