javascript - html中checkbox、select、radio、file怎么改变它们的样式，让他们变的美观好看？

Question

html中input中的checkbox、select中的option、input中的radio、input中的file怎么改变它们的样式，让他们变的美观好看？尤其是在移动端怎么显示比较好看的呢，有什么好的经验，求助大神们！

Answer 1

file是没办法修改样式的，一般上传图片的东西都是用插件去完成的（有的是filsh，有的是使用JS模拟出来的），select基本也改不了什么样式，bootstrap上有模拟好的你可以直接用，或者自己写一个也是可以的，像checkbox,radio,一般没有去修改他们的样式，如果设计部门刻意有要求了需要使用JS模拟出来（本人也不是大牛，这些只是自己在工作中所总结出来的）

Answer 2

可以去了解 weui 是怎么写的。
http://weui.github.io/weui/#cell

另外 bootstrap 也是很好的参考点

Answer 3

对于checkbox和radio，我常用的方法是用css来改变label样式，从而达到美化的效果。

<input type="checkbox" id="check" name="check" />
<label for="check">Checkbox</label>

input[type=checkbox] {display: none;}

input[type=checkbox] + label:before {  
    content: "";
    border: 1px solid #000;
    font-size: 11px;    
    line-height: 10px;
    margin: 0 5px 0 0;
    height: 10px;
    width: 10px;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
}

input[type=checkbox]:checked + label:before {  
    content: "\2713";
}

而对于input[type=file]，则是label或js配合模拟成按钮外观和点击事件。
而对于select，则只能隐藏原表单控件，用js动态输出html模拟。但我一直直接用网上别人写好的插件或库比如select2

Answer 4

如果是比较复杂的样式只能通过其他标签模拟，网上一搜一大堆，简单的样式可以通过设置appearance为none后进行添加，webkit浏览器要加前缀

Answer 5

http://amazeui.org/
推荐你看下

Answer 6

一般都是把input 不可视 然后绑定label 修改label的样式