HTML5表单为file文件类型的样式修改

问题：
        觉得表单中自带的file很难看，可以自己去设置样式。
解决方法：
    在input元素添加一个前元素，例如Button ，然后把input元素和button元素位置都设置成position:absolute;然后把top和left样式调整在一个位置上，width和height设置一致，我这里设置成position：relative；直接上代码：
        结构：

<table id="table">
<tr>
<td>商品详情图：</td>
<td>
<button class="btn btn-default my-button">修改图片</button>
<input type="file" name="file"  onchange="alterButtonValue(this)"
onmouseenter="alterButtonBgColor(this)"
onmouseout="alterButtonBgColor2(this)" accept="image/*"/>
</td>
</tr>
        
</table>

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代码，更加完美：<script>
function alterButtonValue(obj){
var btn = obj.previousElementSibling;//获取上一个节点元素
btn.innerText = obj.files[0].name;
}
function alterButtonBgColor(obj){
var btn = obj.previousElementSibling;//获取上一个节点元素
btn.classList.add("my-button-hover");
}

function alterButtonBgColor2(obj){
var btn = obj.previousElementSibling;//获取上一个节点元素
btn.classList.remove("my-button-hover");
}
</script>

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