1.移动端webview中默认样式
->整体样式默认样式清除
html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100%; }
默认缩放
body { width: 100%; padding: 0px; margin: 0px; font-family: "微软雅黑" background: #F8F8F8; }
body默认会有8px的margin导致页面在手机上会有灰色边界出现，当出现这种情况是大概率是因为此原因，另外的原因可能在页面的样式使用百分比宽度和固定宽度px结合使用的时导致页面宽度超过100% ，造成页面可以左右活动。此时需要仔细检查页面样式调整百分比使得页面合适
->按钮默认样式清空
input[type="submit"] { -webkit-appearance: button; cursor: pointer; }
->选择框默认样式
input[type="radio"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
input[type="search"] {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
->输入框默认样式
input[type="text"]{
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-appearance: none; }
在safari内核中点击输入框时有黑色的背景一闪而过，在这里将其highlight-color设置为透明就可以避免此情况
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {
color: #e5e5e5;}
input:-moz-placeholder, textarea:-moz-placeholder {
color: #e5e5e5; }
input::-moz-placeholder, textarea::-moz-placeholder {
color: #e5e5e5; }
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
color: #e5e5e5; }
输入框中默认提示 placeholder的样式设置
网友评论