Mode one: direct transparent hiding
. 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>
Mode two: Overlay hidden JS Call
. 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 ();" > Upload Images </button>
You can click here to get the button style code you want
One of the HTML learning notes (the encapsulation of the input file selection box)