各种输入框的各种placeholder

input 和 textarea 的 placeholder 获取焦点后隐藏:

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder
{
    text-indent: -999em;
    z-index: -20;
}

对于多行输入的文本,textarea 不好做到弹性动态随内容变高,
我们可以将一个div作为文本输入域接收用户输入的信息:

<div contenteditable="true">
    ...
</div>

为这类输入框 div 添加 placeholder,
直接在标签内设置 placeholder 是不行的,
需要如下操作:

[contenteditable]:empty:before{
    content:attr(placeholder);
}

它的placeholder 获取焦点后隐藏的方法如下:

[contenteditable]:empty:focus:before{
    content:none;
}

在苹果手机上,此类div在用户点击后不能正确获取焦点,弹出软键盘的解决方法:

[contenteditable]{
    -webkit-user-select:text;
    user-select: text;
}

此外,苹果手机上尽量不要直接给input设置border-bottom,
因为实际项目中给我发现会出现去除不掉的圆角,还请高人指点。

以上。

猜你喜欢

转载自blog.csdn.net/Maximus_ckp/article/details/62234558