自定義checkbox， radio樣式

時間 2019-11-11

原文原文鏈接

一. label標籤

1. 概念：

HTML <label>元素表示用戶界面中項目的標題。
它一般關聯一個控件，或者是將控件放置在label元素內，或者是用做其屬性。這樣的控制稱做label元素的labeled controlcss

2. 用法：

用法1：

<label>Click me <input type="text" id="User" name="Name" /></label>

用法2：

<label for="User">Click me</label> <input type="text" id="User" name="Name" />

二. background-position屬性

1. 概念：

background-position屬性用來指定背景圖片的初始位置；這個初始位置相對於background-origin定義的背景位置圖層來講的html

2. 用法:

background-position:[position-x]，[position-y]

若是隻有一個值被指定，則這個值就會默認設置背景圖片位置中的水平方向，與此同時垂直方向的默認值被設置成50%。在關鍵詞、百分比和數值混合指定的狀況下，關鍵詞 left 和 right 只能被指定水平方向的位置（第一個值）同時 top 和 bottom 只能被指定指定爲垂直方向的值（第二個值）。一樣，負數值是容許指定的。ios

三. 僞類和僞元素

1.概念：

僞類：存在的意義是爲了經過選擇器找到那些不存在於DOM樹中的信息以及不能被常規CSS選擇器獲取到的信息。
僞類由一個冒號:開頭，冒號後面是僞類的名稱和包含在圓括號中的可選參數。
經常使用僞類:css3

:active 向被激活的元素添加樣式。 :focus 向擁有鍵盤輸入焦點的元素添加樣式。 :hover 當鼠標懸浮在元素上方時，向元素添加樣式。 :link 向未被訪問的連接添加樣式。 :visited 向已被訪問的連接添加樣式。 :first-child 向元素的第一個子元素添加樣式。 :checked 向選中的控件元素添加樣式

僞元素:僞元素在DOM樹中建立了一些抽象元素，這些抽象元素是不存在於文檔語言裏的（能夠理解爲html源碼）；
注意:css3爲了區分僞類和僞元素，規定僞類前面有一個冒號，僞元素前面有兩個冒號
經常使用僞元素git

::before 做爲做用元素的第一個子節點插入dom中 ::after 做爲做用元素的最後一個子節點插入dom中

2.區別與聯繫

聯繫：都是經過選擇器爲元素添加樣式
區別:僞元素會建立一個元素，但不是真正的Html元素，僞類至關於爲一個元素建立一個class樣式
4、自定義控件的原理
隱藏原生input標籤，使用label，而且給之加樣式來實現自定義控件
html：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定義checkbox,radio樣式</title> <link rel="stylesheet" href="index.css"> </head> <body> <div id='wrap'> <h2>僞元素實現：</h2> <div class="checkbox"> <input type="checkbox" name="" id="checkBox" class="checkBox"> <label for="checkBox"></label> </div> <div class="radio"> <input type="radio" name="sex" id="radioBox" class="radios"> <label for="radioBox"></label> <input type="radio" name="sex" id="radioBox1" class="radios"> <label for="radioBox1"></label> </div> <h2>雪碧圖實現：</h2> <div class="checkbox"> <input type="checkbox" name="" id="checkBox_sprit" class="checkBox_sprit"> <label for="checkBox_sprit"></label> </div> <div class="radio"> <input type="radio" name="sex1" id="radioBox_sprit" class=" radioBox_sprit"> <label for="radioBox_sprit"></label> <input type="radio" name="sex1" id="radioBox1_sprit" class=" radioBox_sprit"> <label for="radioBox1_sprit"></label> </div> </div> </body> </html>

僞元素方法實現
使用:checked僞類和::after僞元素,當控件選中時添加僞元素到label標籤中：

css:github

.checkbox{ margin-bottom: 30px; font-weight: 700; } .checkBox+label,.radios+label{ width:16px; height: 16px; border:1px solid #d9d9d9; display: -webkit-flex; display:flex; } .checkBox:checked+label,.radios:checked+label{ border:1px solid #d73d32; font-weight: 700; } .checkBox:checked+label::after,.radios:checked+label::after{ margin: auto; content: '2714'; color: red; width:8px; height:8px; line-height: 8px; text-align: center; font-size: 12px; } input{ margin:0; display: none; } /* radio */ .radio{ display: -webkit-flex; display: flex; width: 50px; -webkit-justify-content: space-between; justify-content: space-between; } .radios+label{ border-radius: 50%; } .radios:checked+label::after{ border-radius: 50%; width:8px; height:8px; line-height: 8px; content: ' '; background: #d73d32; }

效果展現
 源碼地址web

雪碧圖實現方法:
給label加一個背景圖片，並經過設置選中狀態時的background-position屬性
css:

.checkBox_sprit+label,.radioBox_sprit+label{ width: 16px; height:16px; border:none; display: inline-block; background:url('bg.png') no-repeat; } .checkBox_sprit+label{ background-position:-25px -32px; } .radioBox_sprit+label{ background-position: -24px -10px; } .checkBox_sprit:checked+label{ background-position: -60px -32px; } .radioBox_sprit:checked+label{ background-position: -59px -10px; }