自定義按鈕樣式

2022-08-05 12:30:18 字數 413 閱讀 9996

在一些**上經常可以看到改造過的按鈕選項比如這樣

最常見的自定義按鈕樣式,其實是用label模擬的,關於label可以在mdn進行查閱

label的for與表單的id對應,點選click對應的表單被啟用

click

通過上面的例子知道了,只要label的for屬性和表單的id對應,那麼點選label就等於點選表單

這樣我們可以通過把原本的input隱藏掉,改造label的樣式就好了,來個最簡單的實現

css

label

input

.demo:checked+label

.demo:checked+label::after

html