html checkbox樣式美化

2022-09-15 21:30:33 字數 707 閱讀 5542

思路:使用label結合checkbox,背景進行美化。

原理:1. for 屬性規定 label 與哪個表單元素繫結,顯式繫結和隱式繫結,均可實現checkbox的選用與取消效果,具體見:標籤的 for 屬性

編碼實現:

這裡我們通過隱藏預設的checkbox,新增乙個行內元素span並控制span在checkbox不同狀態下的樣式即可。

1.html:

<

label

class

="my_protocol"

>

<

input

class

="input_agreement_protocol"

type

="checkbox"

/>

<

span

>

span

>

label

>

2. css:

}/*未選中時*/

.my_protocol .input_agreement_protocol+span /*選中checkbox時,修改背景的位置*/

.my_protocol .input_agreement_protocol:checked+span

效果圖:

demo :icon_checkbox.zip

WPF 之 DataGrid 入門實踐三 樣式美化

net 對 ui 控制項提供了豐富的樣式設定屬性,但是當你不是很熟練或者長時間沒有使用後很容易忘記其樣式的屬性,這裡對常用的 datagrid 樣式設定做個筆記,以便日後查閱。datagrid 的檢視 xaml 以上是 datagrid 檢視的 類似於 html 其中binding屬性是資料繫結時使...

CSS字型樣式,背景樣式,列表樣式

1.color 字型顏色 2.font size 字型大小 盡量用偶數 3.font family 字型型號 可以設定多個字型,用,隔開,優先使用第乙個字型,如果沒有使用下乙個。中文字型加引號,英文本型如果有空格 則也要加引號 線上字型 font face 4.font style 字型樣式 斜體等...

字型樣式 文字樣式

1,字型樣式設定 字型型別 風格 font style 字型粗細font weight 字型大小font size 字型系列font family 組合值寫法 字型風格和字型粗細可以都不寫或者寫乙個,也可以換順序,但是font size和family的順序不能換,也必須同時給。注意 可以用font ...