方式一:直接透明隐藏
.file_button_container,.file_button_container input {background: transparent url(./img/BT5AB.png) left top no-repeat;height: 47px;width: 263px;} .file_button_container {background: transparent url(./img/BT5AB.png) left top no-repeat;} .file_button_container input {opacity: 0;}
<div class="file_button_container"><input type="file" /></div>
方式二:覆盖隐藏 js调用
.styled-button { background-color:#25A6E1;color:#fff;font-family:'Helvetica Neue',sans-serif; font-size:14px; line-height:30px;border-radius:20px;-webkit-border-radius:20px; -moz-border-radius:20px;border:0;width:120px;height:32px }
function chooseFile() { $("#fileInput").click(); }
<div style="height:0px;overflow:hidden"> <input type="file" id="fileInput" name="fileInput" /> </div> <button type="button" class="styled-button" onclick="chooseFile();">上传图片</button>
时间: 2024-12-30 00:03:52