鍍金池/ 問答/HTML/ input上傳文件的css應(yīng)該怎么改啊，這個(gè)太難看了

input上傳文件的css應(yīng)該怎么改啊，這個(gè)太難看了

<form id="uploadForm">
                <input type="file" name="file" id="img_upload">
                </form>

圖片描述

回答
編輯回答
愿如初

剛好之前項(xiàng)目需要，做過類似的，效果截圖如下。
圖片描述

圖片描述

鼠標(biāo)移入效果：
圖片描述

并且支持預(yù)覽和刪除的功能，我的實(shí)現(xiàn)大致思路是：隱藏input標(biāo)簽，然后通過label標(biāo)簽的for屬性來觸發(fā)input標(biāo)簽上的onChange事件，然后將label標(biāo)簽樣式修改成自己想要的樣式即可。
html大致結(jié)構(gòu)，因?yàn)轫?xiàng)目用的react，所以label上對(duì)應(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>

希望對(duì)你有幫助~~~

2018年4月11日 11:14
編輯回答
做不到

找美工給你設(shè)計(jì)一個(gè)。然后

#img_upload {
 //your styles
}
2017年8月8日 04:41
編輯回答
陌南塵

正確的做法是

隱藏這個(gè)input，用div或者button來占位且綁定onclick事件來手動(dòng)觸發(fā)input的click效果…然后div/button的樣式就可以隨便搞了…

2017年6月11日 01:45
編輯回答
寫榮

用div模擬一個(gè)

2017年4月6日 07:52
編輯回答
拼未來

隱藏 <input type="file">，使用 <label> 代替。

實(shí)際上表單元素大多數(shù)都是 ShadowDOM，很難直接修改樣式，提升視覺效果和交互體驗(yàn)都要靠 <label>。題主不妨看下我的講堂 寫 CSS 也要開腦洞：萬能的 :checked + label，可以了解更多用法。

2018年6月16日 14:17