檔案上傳html樣式美化
阿新 • • 發佈:2019-01-28
最近學習jquery file upload外掛,覺得檔案上傳按鈕樣式程式碼可以拿來一用,適當做了些美化。
<div class="fileinput-button">
圖片選擇<input type="file">
</div>
順便說下,我遇到的問題:inline-block元素使用overflow: hidden後元素上移。只需加上<style> .fileinput-button { position: relative; overflow: hidden; background: #fabe00; width: 70px; height: 30px; color: #fff; font-size: 14px; text-align: center; border: 0; border-radius: 5%; line-height: 30px; } .fileinput-button:hover { background: #FF8650; } .fileinput-button input { position: absolute; top: 0; right: 0; margin: 0; opacity: 0; -ms-filter: 'alpha(opacity=0)'; font-size: 200px; direction: ltr; cursor: pointer; } /* Fixes for IE < 8 */ @media screen\9 { .fileinput-button input { filter: alpha(opacity=0); font-size: 100%; height: 100%; } </style>
.fileinput-button {
vertical-align: middle;
}
效果如圖,好看多了