input标签样式

Input标签在页面上也挺常见的，你知道吗，一个小小的input标签竟然有多达23种样式，接下来让我们看看都能实现什么样的效果呢。
1、这个是input标签的日历样式（普通日历）

这个是它默认的显示

当鼠标移至其上方时，后面的4个小按钮会显示出来，点击最后面那个小按钮时时就会弹出下面那个选择日期的框，当然，它支持手动输入。

2、这个也是日历样式，但是它可以精确到分钟

这是默认格式（支持手动输入）

这是点击后展开的样式

3、这是月份日历

默认样式：

展开后的样式，当你选中某日时，它会自动帮你填好月份。

4、下面是周日历，精确到星期。

默认样式：

展开后的样式，它的展开日历表比其它的日历表多了一列，标明了该日期是多少周。

5、这是input中的最后一个有关时间的样式了，它只能显示几时几分。

默认样式：

显示的样式

6、下面是它的按钮样式

默认效果，呃…….不怎么好看

7、重置按钮

按钮默认样式：

8、提交按钮

按钮默认样式：

9、复选框

默认的样式

点击后会被勾选

10、下面这个是单选框，就是个空心的小圆点，复选框是个有点圆角效果的正方形

默认样式：

选中后的样式

11、下面是一个挺好玩的样式，颜色板

这是默认的样式，默认黑色，还自带了一个边框。

点击它后的弹框，在这里可任意挑选自己喜欢的颜色。

12、可以选择文件的方法

默认样式，提示未选择文件

选择文件后的样式

13、第二个提交按钮，图片提交按钮，可以在src中填入图片的路径，添加图片后，图片会按原图的大小显示，可以自己设置格式（style）。

默认样式：

添加图片后的样式

14、数字框，毫无疑问，只能在里面添加数字

初始样式：

使用时样式：

15、密码框，它会将你输入进去的字符转化为小黑点，看不了你的字符

默认样式

输入字符后的样式

16、可控进度条

初始样式：

17、此文本框与其他文本框不同的是，输入字符后，末尾有一个×，可以将你输入的字符全部清空，比一般文本框更便捷一点。

初始样式：

输入字符后的样式：

剩下的样式都是普通的输入框。