问题:
觉得表单中自带的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,欢迎大家的加入,分享学习是一件开心事