Form 表单深入 UI修正CSS篇

1. Form 表单深入 标签功能
2. Form 表单深入 UI修正CSS篇
3. Form 表单深入 网络通信篇

原生表单控件提供样式还存在于上个世纪，已经没法满足UI设计稿。有时我们需要在此基础上扩展，或者模拟相应的表单功能。

|-- 基本输入框
|-- type=num的输入框
|-- 单选按钮
|-- 多选按钮
|-- 按钮

对于表单的修饰，一部分在于修改可见的CSS，还有些需要修改表单自身携带的伪元素。
打开chrome浏览器开发者工具，点设置，在Element一项中，选择show user agent shadow dom，然后再查看表单的dom节点，会发现有shadow-root

。
可以通过修改表单的伪元素，来修改浏览器默认的样式。下面有jsrun在线代码可以看。

后期会专门写一篇“伪类，伪元素”。
可以先看一下张鑫旭大神的一篇博客伪元素表单控件默认样式重置与自定义大全。

width="100%" height="300" src="//jsrun.net/qVqKp/embedded/all/light/" allowfullscreen="allowfullscreen">

datalist不是很好演示，主要是用的本地缓存，输入后将记录存入本地localstorage。

对于localstorage的操作，在下面的函数里

/**
 * 存储获取搜索记录
 * @param  {string} method 方法调用的目的，存储'save',获取'get',删除一个'removeone', 全部删除'removeall'
 * @param  {string} key    自己定义的localstorage的关键字
 * @param  {string} value  存储的历史记录值
 * @return {array}         如果method为get，则返回数组，如果是save，void()
 */
function dealKeyword(method, key, value) {
    var ls = localStorage.getItem(key);
    value = value.trim();
    if (method === 'save') {
        if (ls === null) {
            localStorage.setItem(key, value);
            return localStorage.getItem(key).split(',')
        } else {
            if (ls === '') {
                localStorage.setItem(key, value);
                var arrStorage = [];
                arrStorage.unshift(value);
                return arrStorage;
            } else {
                var arrStorage = ls.split(',');
                if (arrStorage.indexOf(value) < 0) {
                    if (arrStorage.length > 10 || arrStorage.length === 10) {
                        arrStorage.pop();
                    }
                } else {
                    arrStorage.splice(arrStorage.indexOf(value), 1);
                }
                arrStorage.unshift(value);
                localStorage.setItem(key, arrStorage.toString());
                return arrStorage;
            }
        }
    } else if (method === 'get'){
        if (ls === null || ls === '') {
            return []
        } else {
            return ls.split(',');
        }
    } else if (method === 'removeone') {
        var arrStorage = ls.split(',');
        arrStorage.splice(arrStorage.indexOf(value), 1);
        localStorage.setItem(key, arrStorage.toString());
        return arrStorage;
    } else if (method === 'removeall') {
        localStorage.setItem(key, '');
        return []
    }
}

有点赶，下次再补吧！