CSS 美化 input button 按鈕

2021-07-09 02:53:43 字數 1058 閱讀 5864

input

、button

可以通過

css自定義外觀,而

checkbox radio

則沒辦法通過

css自定義樣式。今天逛

google

+的時候發現了乙個利用

css3

偽元素:

after

來自定義

checkbox radio

樣式的方法。利用

css3

不僅可以自定義

checkbox radio

的邊框或背景還可以改變選中時的樣式。具體看以下**:

css**:

input

[type

=checkbox

],input

[type

=radio

]input

[type

=checkbox

]:active

,input

[type

=radio

]:active

input

[type

=checkbox

]:hover

input

[type

=radio

]input

[type

=checkbox

]:checked

,input

[type

=radio

]:checked

input

[type

=radio

]:checked

::after

input

[type

=checkbox

]:checked

::after

input

[type

=checkbox

]:focus

用到的具體效果:

CSS美化頁面

層疊樣式表 英文全稱 cascading style sheets 是一種用來表現 html 或 xml 等檔案樣式的計算機語言。css不僅可以靜態地修飾網頁,還可以配合各種指令碼語言動態地對網頁各元素進行格式化。css優點 css注釋標籤 注釋內容 選擇器選擇網頁中的標籤,給標籤內的文字新增css...

css美化元素

一.span標籤 能讓某幾個文字或者某個詞語凸顯出來 今天是11月份的第一天,地鐵卡不打折了 二.字型風格 font family 字型型別 font size 字型大小 font style 字型風格 font weight 字型粗細 font 風格 粗細 大小 型別 三.文字樣式 color 設...

CSS美化頁面布局

css美化頁面布局 1.概念 cascading style sheets 層疊樣式表 層疊 多個樣式可以作用在同乙個html的元素上,同時生效 2.好處 1.功能強大 2.將內容展示和樣式控制分離 降低耦合度。解耦 讓分工協作更容易 提高開發效率 3.css的使用 css與html結合方式 1.內...