91亚洲精品久久久蜜桃借种,亚洲色图av在线

這兩天在做百姓網的筆試題的時候遇到了這樣一個問題，用 HTML5 的新特性實現百姓網現有的一個模塊，在百姓網中逛了一陣后最終選定了發(fā)布信息所用的表單模塊，原因很簡單，在 HTML5 中針對表單有很多新特性可以使用，這些新特性也很有實用性，畢竟有表單的地方實在是太多了，比如注冊啦，登錄啦，發(fā)帖啦......（喂，有點跑題了親。）

這個時候，我看到原始網頁中的表單里有這么個元素

我的第一反應就是，哈，input元素而已，用CSS定制一下樣式就可以了，然后我很自然的準備“右鍵”-“審查元素”來看看具體的樣式百姓網是怎么寫的以后發(fā)現......

一定是我的打開方式不對......既然這樣，當然是自己動手豐衣足食了，有一點我可以確認的是，這種上傳文件的表單控件跑不了是要用input[type="file"]的，好吧，直接添加這么一行代碼：

復制代碼

代碼如下:

在chrome瀏覽器中刷新看看：

毫無疑問，這是預設的樣式，而且我發(fā)現這種預設的樣式還很不好修改，最讓人惱火的是，不同的瀏覽器預設的樣式都是不一樣的，借用網上的一張圖片就很清楚了：

（所以我就說嘛，你們這些瀏覽器一點都不聽話，彼此之間又不好好溝通，自high得特別爽，苦的可是前端的同學啊你妹）
不過辦法還是很好想到的，用一個元素把 input 包裹起來，在元素中添加所需要的其他元素，并設置樣式，做成需要達到的效果，將 input 元素的 position 值設為 absolute 填充外圍元素，再將 input 透明即可。
HTML代碼如下：

復制代碼

代碼如下:

對應的CSS代碼如下：

復制代碼

代碼如下:

#input-file {
position: relative; /* 保證子元素的定位 */
width: 120px;
height: 30px;
background: #eee;
border: 1px solid #ccc;
text-align: center;
cursor: pointer;
}
#text {
display: inline-block;
margin-top: 5px;
color: #666;
font-family: "黑體";
font-size: 18px;
}
#file {
display: block;
position: absolute;
top: 0;
left: 0;
width: 120px; /* 寬高和外圍元素保持一致 */
height: 30px;
opacity: 0;
-moz-opacity: 0; /* 兼容老式瀏覽器 */
filter: alpha(opacity=0); /* 兼容IE */
}

顯示效果如圖：

kimoji......
八過，這里仍有一個bug，當做成這樣的按鈕時，當鼠標懸停時應該是可點擊狀態(tài)，但即使給所有元素都添加了 cursor: pointer; 屬性，仍然會有某些區(qū)域顯示為指針狀態(tài)，有沒有高手能夠解決呢？

標簽：山南荊門潮州懷化青島哈密昭通延邊

巨人網絡通訊聲明：本文標題《input元素[type=＂file＂]時的樣式定制及瀏覽器兼容性問題探討》，本文關鍵詞 input,元素,type,file,時,的,；如發(fā)現本文內容存在版權問題，煩請?zhí)峁┫嚓P信息告之我們，我們將及時溝通與處理。本站內容系統采集于網絡，涉及言論、版權與本站無關。