苹果手机input和a标签的自我小结

平时我们在写手机页面的时候,如果用到了

1 <input type="button" value="测试按钮" />
2 <input type="text" placeholder="测试"/> 
3 <a href="#">测试a标签</a>

分别在手机上的效果是:

分别点击这三个,会出现灰色的背景,

通过添加css属性去掉灰色背景:

-webkit-tap-highlight-color:rgba(0,0,0,0);
-moz-tap-highlight-color:rgba(0, 0, 0, 0);
-ms-tap-highlight-color:rgba(0, 0, 0, 0);
-o-tap-highlight-color:rgba(0, 0, 0, 0);
tap-highlight-color:rgba(0, 0, 0, 0);

设置input 的placeholder:

::-webkit-input-placeholder { /* WebKit browsers */ 
font-size:14px;
line-height: 14px;
color: red;
} 
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
font-size:14px;
line-height: 14px;
color: red;
} 
::-moz-placeholder { /* Mozilla Firefox 19+ */ 
font-size:14px;
line-height: 14px;
color: red;
} 
:-ms-input-placeholder { /* Internet Explorer 10+ */ 
font-size:14px;
line-height: 14px;
color: red;
}

修改input在苹果上面的默认样式:

-webkit-appearance: none;

猜你喜欢

转载自www.cnblogs.com/jsgg/p/9120629.html