修改 placeholder 样式，placeholder 换行 以及iOS 上设置placeholder被遮挡问题解决

一、修改placeholder样式

通过选择器就可以简单的修改该placeholder的样式

input::placeholder{
    font-size:14px;
    color: #666666;
}

二、placeholder 换行

在input 里面很少用到,input 就只有一行而已,多行的话就会使用textarea标签,确实在textarea标签里面如何让placeholder 换行是一个麻烦事,由于不同浏览器兼容性还不一样.
这里提供一个简单的实现方法
jq_watermark,一个基于jQuery的小插件,min版本才2.8KB
使用方式
导入jQuery,导入jq_watermark, jq_watermark在github上的下载地址
给textarea 加上名为 jq_watermark 的class

<textarea name="" class="jq_watermark" cols="110" rows="10" required placeholder="第一行<br/>第二行<br/>第三行"></textarea>

三、ios上的小坑

在苹果高版本上,iPhone6,7 上发现了一个小问题,就是当你设置placeholder显示的字体大小的时候,有时候会被遮挡掉一部分,这时候怎么解决?

解决方法:先设置input 里面的字体大小需要大于placeholder的字体大小

公众号：

微信：