修改 placeholder 样式,placeholder 换行 以及iOS 上设置placeholder被遮挡

原创 2017年08月14日 23:11:18

修改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的字体大小^-^

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

关于input的placeholder的样式设置问题,兼容多种浏览器

一般placeholder的字体颜色要比输入的value值色值要淡一些的,所以我们用到了 :-webkit-input-placeholder, :-moz-placeholder, :-ms-inp...

文本框默认提示文字,placeholder属性

CSS修改HTML5 placeholder颜色

placeholder是html5中输入框的一个新的属性(input,textarea)。 它主要用于当输入框没输入内容时,给出的默认显示文案,比如说“请输入账户名”等,对于这个属性,不同的浏览器所显...

CSS3中,如何设置text文本框中,placeholder的字体颜色大小等

1.CSS3中可以通过placeholder属性为文本框(text)或者文本域(textarea)设置默认值,         效果如下所示:              ...

html文字超出两行,则显示省略号

html多行显示省略号

TextArea里Placeholder换行问题

转:http://www.tuicool.com/articles/feYVNf 页面上使用TextArea控件时,会时不时的想给个提示,比如按照一定方式操作之类的。 正常情况下,会使用Place...
  • myinc
  • myinc
  • 2014-12-26 15:57
  • 1558

textarea 标签中placeholder提示信息手动换行(jQuery水印插件watermark.js )

textarea中的placeholder信息有时需要作换行处理,如果利用空格填充让其内容自动换行的话,不大好控制。于是上网百度了一下,用了watermark.js 这个插件。这个插件据说还可以做水印...

CSS 实现 textArea 的 placeholder 换行

textArea的placeholder不能换行。例如:<textarea placeholder="第1行 \n 第2行 第3行 \A 第4行 第5行">这是不会起作用的,会原封不动地输出。 ...

TextArea里Placeholder换行问题

页面上使用TextArea控件时,会时不时的想给个提示,比如按照一定方式操作之类的。正常情况下,会使用Placeholder,但这样的提示是不会换行的,无论是用\r\n,还是用,都不起作用。   前...

Placeholder如何换行

使用js动态添加标签充,处理换行问题 1 var placeholder = 'This is a line \nthis should be a new line'; 2 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)