关于我们

我们期待与您的携手,以设计驱动企业价值增长,实现您的商业目标

关于我们服务流程支付方式新闻动态加入我们联系我们

给原生元素美个容的water.css

  • 日期:2021-03-12标签:css,water,input,type,输入框分类:新闻动态

原标题:给原生元素美个容的water.css

最近看材料时,无意间看到了GitHub上有一个css项目居然达到了6k的star量,瞬间提起了爱好

GitHub地址戳这儿:https://github.com/kognise/water.css

已然提起了爱好,那决断去了解一下,看称号本以为是一个动画库,可是看下来才发现这是一个改动默许HTML元素款式的css,并且不需求增加额定class!!

在网上其实有许多更改默许款式的css库,可是大多需求增加class,那么多class每次还需求查文档,如果写上头忘掉加,一看页面,一个大大的白眼送给自己

官方的演示demo地址在这儿:

https://watercss.kognise.dev/

watercss.kognise.dev

只需求在自己的项目中引证一个css文件即可,并且供给了三种主题

打开全文

1、Automatic:依据页面中设置的prefers-color-scheme自动识别敞开深夜形式

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">

2、Dark theme:深夜形式

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.css">

3、Light theme:默许的正常白日形式

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/light.css">

下面咱们就来罗列一些谷歌中 默许款式 and 美容后 的款式比照

1、一般输入框

<input type="text">

2、只读输入框

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

3、禁用输入框

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

4、textarea输入框

<textarea placeholder="这是一个textarea"></textarea>

5、单选框

<input id="radioDemo" type="radio">

<label for="radioDemo">单选框</label>

6、复选框

<input id="checkboxDemo" type="checkbox">

<label for="checkboxDemo">复选框</label>

7、按钮

<input type="submit">

<input type="button" value="按钮">

8、滚动条

当然,water.css并不只对以上的内容进行了美化。当咱们不想花费太长时刻做一个demo页面,但又不想做的太丑时,就可以挑选试一试这个css,最重要的是,不需求增加额定class呀!闭眼写就完事了!

好了好了,话不多少,赶忙去试一试吧

回来,检查更多

责任编辑:

上一篇:如何赋能快递服务更有“智慧”?揭秘德邦快递的高科技产品 下一篇:意想不到,TCL空调的智慧新风竟然是这样的?
建议在1280*800的分辨率以上浏览