自学之路1

今天先来看看html5的新的表单属性，表单元素。

Input的新特性 type=color 允许你选择自己想要的颜色。

Type=date 自带的时间插件，但是这个东西太不美观了，感觉用不到

Datetime，datetime-local允许你选择一个时间，我觉得好像没有什么用的样子，兼容也还不咋的，就先掠过

Type=email，email 类型用于应该包含 e-mail 地址的输入域。这个东西提交了可以自己自动验证email域值的合法性，不过我感觉意义不大，现在都是自动补全@什么的，这个看看就好了。

Type=month也是选择一个月 没什么意思

Type-number还行 <input type="number" name="quantity" min="1" max="5"> 这个东西自己可以限定输入的值的范围。

 range特性，也可以限定值的大小范围，类似一个滑块的控制，可以定义一个不需要太精准的数值。

Search特性，这个东西有点意思，比text好用的地方就是，这个输入了东西之后呢，输入框最右边会有个小×，这个东西可以清除输入内容，还可以啊，可以少用js写个逻辑。在css中也可以对这个东西的小X啊什么的进行样式的设置调整，或者对placeholder进行样式调整，input[type=search]::-webkit-input-placeholder

input[type=search]::-webkit-search-cancel-button

还有time，tel，url，week特性，没有感觉有什么特别的感觉，看看就好了。

<datalist> 这个东西呢也有点意思，要让input和datalist绑定起来。

• 不能使用css去随意控制或改变其下拉建议列表中的项
• 不能控制datalist的位置
• 不能控制每次当用户输入多少个字符后，就出现下拉建议列表
• 不能将其与服务器的数据绑定

这个东西目前IE9之前的不支持啊。。。。

 

 

解决表单autofill的黄色背景input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset;border: 1px solid #CCC!important}

 

通过box-shadow来解决。

 

列表可以指定列表标记的图片。list-style-image: url();

 

Visibility:hidden;  display:none; 前者会渲染 后者不会

 

可以用transform来设置居中