input上传文件的css应该怎么改啊，这个太难看了

Question

<form id="uploadForm">
                <input type="file" name="file" id="img_upload">
                </form>

Answer 1

正确的做法是

隐藏这个input，用div或者button来占位且绑定onclick事件来手动触发input的click效果…然后div/button的样式就可以随便搞了…

Answer 2

刚好之前项目需要，做过类似的，效果截图如下。

鼠标移入效果：

并且支持预览和删除的功能，我的实现大致思路是：隐藏input标签，然后通过label标签的for属性来触发input标签上的onChange事件，然后将label标签样式修改成自己想要的样式即可。
html大致结构，因为项目用的react，所以label上对应的属性是htmlFor：

<div>
    <input
      type="file"
      id='file'
      accept="image/jpeg, image/gif, image/png, image/bmp"
      styleName="input-file"
      onChange={e => {
        this.onFileChange(e);
      }}
    />
    <label htmlFor="file" styleName="ant-upload">
    </label>
</div>

希望对你有帮助~~~

Answer 3

隐藏 <input type="file">，使用 <label> 代替。

实际上表单元素大多数都是 ShadowDOM，很难直接修改样式，提升视觉效果和交互体验都要靠 <label>。题主不妨看下我的讲堂 写 CSS 也要开脑洞：万能的 :checked + label，可以了解更多用法。

Answer 4

用div模拟一个

Answer 5

找美工给你设计一个。然后

#img_upload {
 //your styles
}