2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

頁面中的文件按鈕的優(yōu)化可以參考?AmazeUI?的思路,把文件選擇域設(shè)為透明那個，覆蓋在其他元素。

在下面的DOM結(jié)構(gòu)中,外層使用了?am-form-file?包過里面的?button?和?文件?input:

<div class="am-form-group am-form-file"><button type="button" class="am-btn am-btn-danger am-btn-sm"><i class="am-icon-cloud-upload"></i> 選擇要上傳的文件</button> <input id="doc-form-file" type="file" multiple="multiple"> </div>

?

按鈕的樣式自定義,主要的樣式如下:

/*外層容器*/ .am-form-file {position: relative;overflow: hidden; }/*文件按鈕*/ .am-form-file input[type=file] {position: absolute;left: 0;top: 0;z-index: 1;width: 100%;opacity: 0;cursor: pointer;font-size: 50rem; }

?

轉(zhuǎn)載于:https://my.oschina.net/zhupengdaniu/blog/1589855

總結(jié)

以上是生活随笔為你收集整理的表单文件按钮的优化的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。