移动端 -- webkit 如何更改表单元素（input、select、radio、checkbox ）的默认外观（placeholder、下拉箭头、清除按钮）？特殊操作？消除transition闪屏

目录

1、如何重置默认外观？

2、改变输入框placeholder的颜色值？

3、placeholder的文字能换行么？

4、修改select 默认下拉箭头

5、禁用 radio 和 checkbox 默认样式

6、禁用PC端表单输入框默认清除按钮

7、禁止ios和android用户选中文字

8、禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片

9、打电话

10、发短信

11、如何阻止windows Phone的默认触摸事件

12、android 去掉语音输入按钮

13、如何修改ios手机使用input输入的时候英文首字母的默认大写？

14、手机拍照和上传图片

15、消除transition闪屏

16、 audio元素和video元素在ios和andriod中无法自动播放

---

1、如何重置默认外观？

.css {
    -webkit-appearance:none;
} 

2、改变输入框placeholder的颜色值？

input::-webkit-input-placeholder {
    color:#AAAAAA;
} 

input:focus::-webkit-input-placeholder {
    color:#EEEEEE;
} 

3、placeholder的文字能换行么？

ios可以，android不可以

4、修改select 默认下拉箭头

::-ms-expand 适用于表单选择控件下拉箭头的修改，有多个属性值。

设置它隐藏 (display:none) ，并使用背景图片来修饰可得到我们想要的效果。

select::-ms-expand {
    display: none;
} 

5、禁用 radio 和 checkbox 默认样式

::-ms-check 适用于表单复选框或单选按钮默认图标的修改，同样有多个属性值。

设置它隐藏 (display:none) ，并使用背景图片来修饰可得到我们想要的效果。

input[type=radio]::-ms-check,
input[type=checkbox]::-ms-check { 
   display: none; 
} 

6、禁用PC端表单输入框默认清除按钮

当表单文本输入框输入内容后会显示文本清除按钮；

::-ms-clear 适用于该清除按钮的修改，同样设置使它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。

input[type=text]::-ms-clear,
input[type=tel]::-ms-clear,
input[type=number]::-ms-clear { 
     display: none; 
} 

7、禁止ios和android用户选中文字

.css { -webkit-user-select: none } 

8、禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片

.css { -webkit-touch-callout: none } 

9、打电话

<a href="tel: 110">打电话给: 警察叔叔</a> 

10、发短信

winphone系统无效

<a href="sms:10086">发短信给: 10086</a> 

11、如何阻止windows Phone的默认触摸事件

winphone下默认触摸事件使用e.preventDefault是无效的。

目前解决方法是使用样式来禁用：

/* 禁止winphone默认触摸事件 */ 
html { -ms-touch-action: none; }

12、android 去掉语音输入按钮

input::-webkit-input-speech-button { display: none }

13、如何修改ios手机使用input输入的时候英文首字母的默认大写？

<input autocapitalize="off" autocorrect="off" />

14、手机拍照和上传图片

<input type="file">的accept 属性

01. 选择照片

<input type=file accept="image/*">

02.  选择视频

<input type=file accept="video/*">

使用总结：ios 有拍照、录像、选取本地图片功能，部分android只有选取本地图片功能，winphone不支持

15、消除transition闪屏

.css{ 
    /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/ 
    -webkit-transform-style: preserve-3d; 
    /*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/ 
    -webkit-backface-visibility: hidden; 
} 

 开启硬件加速，解决页面闪白，保证动画流畅

.css {  
   -webkit-transform: translate3d(0, 0, 0);  
   -moz-transform: translate3d(0, 0, 0);  
   -ms-transform: translate3d(0, 0, 0);  
   transform: translate3d(0, 0, 0);  
}  

16、 audio元素和video元素在ios和andriod中无法自动播放

应对方案：触屏即播

$('html').one('touchstart',function(){ 
    audio.play() 
})