移動(dòng)端H5頁面端如何除去input輸入框的默認(rèn)樣式

這篇文章主要介紹了移動(dòng)端H5頁面端如何除去input輸入框的默認(rèn)樣式，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

前兩天在開發(fā)在微信訪問的HTML5頁面，里面有個(gè)訂單查詢要選擇時(shí)間，剛開始使用的<input type="date">輸入框，沒加任何的樣式，效果是白色的背景再加上邊框很丑，完全與整個(gè)背景不協(xié)調(diào)。

剛開始設(shè)置了輸入框背景色透明（background-color:transparent;），在iOS上面背景色和邊框都沒有了，但是在andriod上邊框和背景色還是存在。后來加上樣式FILTER: alpha(opacity=0)，在andriod中就去掉了邊框和背景。

去掉背景和邊框比以前好看多了，但是因?yàn)轭愋褪莇ate,所以右邊有個(gè)圖標(biāo)，感覺不協(xié)調(diào)，加上appearance:none;樣式圖標(biāo)沒了，比以前更好看了。下圖是效果：

jsp 部分代碼：

<p>  
            <img src="<c:url value="/images/weixin/timeQ.png"/>" class="imgCen" onclick="updateDate(-1);"/>  
            <input type="date" name="queryDate" id="queryDate" value="" onchange="changeDate();"/>   
            <img src="<c:url value="/images/weixin/timeH.png"/>" class="imgCen" onclick="updateDate(1);" style="margin-left: -8px;"/>  
        </p>

輸入框樣式代碼：

.date input[type=date] {  
    background-color:transparent;  
    color:#fff;  
    FILTER: alpha(opacity=0); /*androd*/  
    appearance:none;  /*下拉框去掉右側(cè)圖標(biāo)*/  
    -moz-appearance:none;  
    -webkit-appearance:none;  
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享移動(dòng)端H5頁面端如何除去input輸入框的默認(rèn)樣式內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細(xì)的解決方法等著你來學(xué)習(xí)!