TA貢獻1810條經驗 獲得超4個贊
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>三十客-定制文件輸入框(input,type,file)樣式</title>
<style>
.file-wrapper {
position: relative;
width: 225px;
}
.file-label {
display: block;
padding: 14px 20px;
background: #39D2B4;
color: #fff;
font-size: 1em;
text-align: center;
transition: all .4s;
cursor: pointer;
}
.input-file {
position: absolute;
top: 0; left: 0;
width: 225px;
opacity: 0;
padding: 14px 0;
cursor: pointer;
}
.input-file:hover + .file-label,
.input-file:focus + .file-label {
background: #34495E;
color: #39D2B4;
}
form {
padding: 1rem 0 0 1rem;
}
</style>
</head>
<body>
<h2>點擊按鈕查看演示效果</h2>
<form action="#">
<div class="file-wrapper">
<input class="input-file" id="my-file" type="file">
<label tabindex="0" for="my-file" class="file-label">選擇一個文件...</label>
</div>
</form>
</body>
</html>
TA貢獻1824條經驗 獲得超6個贊
button,input 自己通過id 或者 tag 獲取，大致寫法如下
button.onclick=function(){
input.onclick();
}
舉報