利用CSS3美化單選 複選按鈕的顯示樣式

2022-09-25 02:09:10 字數 439 閱讀 8455

前言

相信大家都知道在表單元素中,單選按鈕和複選按鈕都具有選中和未選中狀態。要覆寫這兩個按鈕預設樣式比較困難。在css3中,我們可以通過狀態選擇器「:checked」配合其他標籤實現自定義樣式。利用css3我們可以打造非常具有個性化的使用者表單,本文中實現的效果非常不錯,感興趣的朋友們下面來一起學習學習。

效果圖如下

例項**

復選單選樣式

注意:

+  是css的相鄰選擇符。

關係選擇符只有四種,是 空格  >  +   ~ (包含選擇符、子選擇符、相鄰選擇符、兄弟選擇符)

總結以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作能帶來一定的幫助,如果有疑問大家可以留言交流。謝謝大家對我們的支援。

本文標題: 利用css3美化單選、複選按鈕的顯示樣式

本文位址: /web/css/85210.html

css3美化核取方塊checkbox

兩種美化效果如下圖 使用css3美化核取方塊checkbox h2 3 div class demo 4 div class wrap 5 p 1.勾選 p 6 input type checkbox id checkbox a1 class chk 1 checked 7 label for ch...

css3寫單選框,核取方塊

廢話不多說直接看圖 核取方塊的選中喝未選中的 哈哈哈,截圖截的不夠好,請諒解。直接上 doctype html html head meta charset utf 8 title title style input type checkbox input type checkbox after i...

CSS3邊框美化

1.邊框圓角border radius 單個寫法 border top left radius 水平半徑 垂直半徑 border top left radius 60px 120px border top right radius 60px 120px border bottom right rad...