給原生HTML變個(gè)樣其實(shí)這是一個(gè)改變默認(rèn)HTML元素樣式的css，而且不需要添加額外class！在網(wǎng)上其實(shí)有很多更改默認(rèn)樣式的css庫(kù)，但是大多需要添加class，那么多class每次還需要查文檔，萬(wàn)一寫上頭忘記加，一看頁(yè)面，一個(gè)大大的白眼送給自己。

其實(shí)只需要在自己的項(xiàng)目中引用一個(gè)css文件即可，而且提供了三種主題：

1、Automatic：根據(jù)頁(yè)面中設(shè)置的prefers-color-scheme自動(dòng)識(shí)別開啟深夜模式

<link rel="stylesheet" >

2、Dark theme：深夜模式

<link rel="stylesheet" >

3、Light theme：默認(rèn)的正常白天模式

<link rel="stylesheet" >

下面我們就來(lái)列舉一些谷歌中 默認(rèn)樣式 and 美容后 的樣式對(duì)比

1、一般輸入框

<input type="text">

2、只讀輸入框

<input type="text" readonly placeholder="readonly輸入框">

3、禁用輸入框

<input type="text" disabled placeholder="disabled輸入框">

4、textarea輸入框

<textarea placeholder="這是一個(gè)textarea"></textarea>

5、單選框

<input id="radioDemo" type="radio"> <label for="radioDemo">單選框</label>

6、復(fù)選框

<input id="checkboxDemo" type="checkbox"> <label for="checkboxDemo">復(fù)選框</label>

7、按鈕

<input type="submit"> <input type="button" value="按鈕">

8、滾動(dòng)條

當(dāng)然，water.css并不只對(duì)以上的內(nèi)容進(jìn)行了美化。當(dāng)我們不想花費(fèi)太長(zhǎng)時(shí)間做一個(gè)demo頁(yè)面，但又不想做的太丑時(shí)，就可以選擇試一試這個(gè)css，最重要的是，不需要添加額外class呀！閉眼寫就完事了！

上一篇

長(zhǎng)沙前端培訓(xùn)機(jī)構(gòu)分享：CSS的特性之層疊性

下一篇

千鋒長(zhǎng)沙java培訓(xùn)分享之Java開發(fā)需要用到的軟件