web移动端常见问题(二)

1.input光标颜色

默认情况下,光标颜色与字体颜色color相同,但也可以通过caret-color属性来单独设置

但是IOS的光标与字体颜色无关,默认是蓝色

可以单独设置光标颜色,这样ios也有效果

input{
    color:red;
    caret-color: green;
}


ios设置光标颜色

2.input光标高度

input域的光标高度与行高相同(chrome手机模拟器与字体大小相同),所以不要设置太高的行高,需要的话可以通过设置上下padding来撑开input的高度

input{
    color:red;
    caret-color: green;
    height: 40px;
    line-height: 40px;
}


设置padding撑开input高度

input{
    color:red;
    caret-color: green;
    line-height: 20px;
    padding: 10px;
}

3.获取焦点时页面放大

IOS下,input获取焦点时页面会放大,meta设置user-scalable=no,或者设置maximum-scale,可以禁止input获取焦点时页面缩放
注意:user-scalable=no之后用户仍然可以用手势对页面进行缩放,包括双击元素和双指缩放

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

4.轮廓outline

android浏览器下,input域处于焦点状态时,默认会有一圈淡黄色的轮廓outline效果

通过设置outline:none可将其去除

input{
    outline: none;
}
posted @ 2019-10-03 14:40  ---空白---  阅读(246)  评论(0编辑  收藏  举报