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

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

CSS 实现 textArea 的 placeholder 换行

textArea的placeholder不能换行。例如:这是不会起作用的,会原封不动地输出。 官方不认为这是一个bug: The placeholder attribute represen...
  • Lancelot_Lewis
  • Lancelot_Lewis
  • 2016年03月18日 10:50
  • 4152

TextArea里Placeholder换行问题

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

CSS修改HTML5 placeholder颜色

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

input placeholder在iOS中不显示

问题描述:input placeholder在浏览器中显示,在iOS中不显示。解决方案:input::-webkit-input-placeholder{ font-size:50px; } inpu...
  • tao_sheng_yi_jiu
  • tao_sheng_yi_jiu
  • 2017年12月29日 14:59
  • 54

iOS开发 - placeholder偏上的问题

[_phoneNum setValue:[UIFont systemFontOfSize:13] forKeyPath:@"_placeholderLabel.font"]; [_phoneN...
  • CodingFire
  • CodingFire
  • 2017年02月06日 15:34
  • 942

iOS开发 - 设置placeholder无效?

平日里设置placeholder并没有注意过,近日发现设置的placeholder颜色没了,查证后才发现,并不是方法无效了,而是位置关系:[textField setValue:[UIColor or...
  • CodingFire
  • CodingFire
  • 2016年11月30日 10:24
  • 1203

input输入框不为text时placeholder的文本在手机上不显示的解决方案

当input输入框的类型不为text的时候,placeholder的文本在手机上不显示,解决方法是通过js来改变输入框的类型。...
  • zk437092645
  • zk437092645
  • 2013年12月29日 14:20
  • 9089

微信小程序 fixed 解决 textarea 的 placeholder 不固定问题

当我们把 textarea 放到一个 position:fixed; 中的元素中时。 会发现这个 textarea 也会跟着固定位置,但是 textarea 的 placeholder 内容不会...
  • yelin042
  • yelin042
  • 2017年05月19日 10:25
  • 1748

Placeholder如何换行

使用js动态添加标签充,处理换行问题 1 var placeholder = 'This is a line \nthis should be a new line'; 2 ...
  • sujuan0709
  • sujuan0709
  • 2017年06月07日 14:16
  • 970

iOS11适配 以及会遇到的坑

关于适配iOS11和iPhone X 应该注意的坑。
  • liushuo19920327
  • liushuo19920327
  • 2017年11月29日 23:05
  • 145
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:修改 placeholder 样式,placeholder 换行 以及iOS 上设置placeholder被遮挡
举报原因:
原因补充:

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