關於H5中 input消除默認,取消在手機上的點擊高亮效果


input消除默認,代碼如下

  

   input{
            -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
            -webkit-user-select: none;
            -moz-user-focus: none;
            -moz-user-select: none;
            -webkit-appearance:none;
            outline: none;
            border: none;
}
其中-webkit-appearance:none;用來改變按鈕在iPhone下的默認風格; //消除輸入框和按鈕的原生外觀,在iOS上加上這個屬性才能給按鈕和輸入框自定義樣式 。   注意:不同type的input使用這個屬性之后表現不一。text、button無樣式,radio、checkbox直接消失。
對於 -webkit-tap-highlight-color ,這個屬性是指點擊元素顯示高亮,(input和a元素或者是可以點擊的元素在手機端點擊)當你點擊一個鏈接或者通過Javascript定義的可點擊元素的時候,它就會出現一個半透明的灰色背景,用戶體驗不好。
要重設這個表現,你可以設置-webkit-tap-highlight-color為任何顏色。
想要禁用這個高亮,設置顏色的alpha值為0即可。
示例:設置高亮色為50%透明的紅色:
-webkit-tap-highlight-color: rgba(255,0,0,0.5);
瀏覽器支持: 只有iOS(iPhone和iPad).
注:如果頁面可以點擊元素需要自定義設置高亮顏色,而-webkit-tap-highlight-color我們沒有做處理,我們自定義設置的高亮顏色就會被這個-webkit-tap-highlight-color默認樣式覆蓋顯示高亮顏色。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM