html file对象修改,HTML5表单为file文件类型的样式修改

问题：

觉得表单中自带的file很难看，可以自己去设置样式。

解决方法：

在input元素添加一个前元素，例如Button ，然后把input元素和button元素位置都设置成position:absolute;然后把top和left样式调整在一个位置上，width和height设置一致，我这里设置成position：relative；直接上代码：

结构：

商品详情图：

修改图片

CSS 样式(top和left值自己慢慢修改)：

#table tr td .my-button{

position: relative;

top: 13px;

height: 50px;

width:150px;

}

#table tr td input[type="file"]{

position: relative;

width:150px;

height: 50px;

opacity: 0;/* 最关键的地方 把input设置成透明，这样只能看到按钮 */

cursor: pointer;

top: -36px;

}

.my-button-hover{

background-color: lightgray!important;/*鼠标划过input通过JS添加样式*/

}

结果图：

没设置opacity样式前：

设置opacity样式后：

再加上JS代码，更加完美：

每天进步一点点，相信自己也可以用代码来改变世界

码农自学交流小群：260532022，欢迎大家的加入，分享学习是一件开心事