TA貢獻1795條經(jīng)驗 獲得超7個贊
正確的做法是
隱藏這個input，用div或者button來占位且綁定onclick事件來手動觸發(fā)input的click效果…然后div/button的樣式就可以隨便搞了…
TA貢獻1995條經(jīng)驗 獲得超2個贊
剛好之前項目需要，做過類似的，效果截圖如下。
鼠標移入效果：
并且支持預(yù)覽和刪除的功能，我的實現(xiàn)大致思路是：隱藏input標簽，然后通過label標簽的for屬性來觸發(fā)input標簽上的onChange事件，然后將label標簽樣式修改成自己想要的樣式即可。
html大致結(jié)構(gòu)，因為項目用的react，所以label上對應(yīng)的屬性是htmlFor：
<div>
<input
type="file"
id='file'
accept="image/jpeg, image/gif, image/png, image/bmp"
styleName="input-file"
onChange={e => {
this.onFileChange(e);
}}
/>
<label htmlFor="file" styleName="ant-upload">
</label>
</div>
希望對你有幫助~~~
TA貢獻1785條經(jīng)驗 獲得超4個贊
隱藏 <input type="file">，使用 <label> 代替。
實際上表單元素大多數(shù)都是 ShadowDOM，很難直接修改樣式，提升視覺效果和交互體驗都要靠 <label>。題主不妨看下我的講堂 寫 CSS 也要開腦洞：萬能的 :checked + label，可以了解更多用法。
舉報