placeholder的样式设置

在input框中有时想将输入的字和placeholder设为不同的颜色或其它效果，这时就可以用以下代码来对placeholder进行样式设置了。

input::-webkit-input-placeholder{} /* 使用webkit内核的浏览器 */

input:-moz-placeholder{} /* Firefox版本4-18 */

input::-moz-placeholder{} /* Firefox版本19+ */

input:-ms-input-placeholder{} /* IE浏览器 */

注1：冒号前写对应的input或textarea元素等。

注2：placeholder属性是css3中新增加的属性，IE9和Opera12以下版本的CSS选择器均不支持占位文本。

eg:

css代码

inputt{

color: #FFC0CB;

font-size: 1.2em;

width: 180px;

height: 36px;

}

input::-webkit-input-placeholder{

color: #ADD8E6;

}

input::-moz-placeholder{ //不知道为何火狐的placeholder的颜色是粉红色，怎么改都不行，希望有大牛路过帮忙指点

color: #ADD8E6;

}

input:-ms-input-placeholder{ //由于我的IE刚好是IE9，支持不了placeholder，所以也测试不了(⊙﹏⊙)，有IE10以上的娃可以帮我试试

color: #ADD8E6;

}

html代码

</div>

效果如下图所示：

PS:除此之外，还能修改placeholder的font-weight等样式。

eg:

我加了句 "font-weight: bold;"，效果如下图所示：

转载于:https://www.cnblogs.com/520BigBear/p/7760140.html

placeholder的样式设置相关推荐

css 修改placeholder颜色 , placeholder的样式设置
在input框中有时想将输入的字和placeholder设为不同的颜色或其它效果,这时就可以用以下代码来对placeholder进行样式设置了. ::-webkit-input-placeholder ...
通过js在控制台输出彩色字体和placeholder的样式设置(记录)
通过js在控制台输出彩色字体代码: var e = "%c";var n = "color:red;text-shadow:5px 5px 2px #fff, 5px ...
placeholder的样式设置和竖杠的样式
placeholder样式详情参考:http://www.cnblogs.com/JennyLin77/p/5308431.html input竖杠样式详情参考: 第一种:line-height 第二 ...
HTML input placeholder的样式设置
placeholder 兼容写法: ::-webkit-input-placeholder { /* Chrome/Opera/Safari */color: pink; } ::-moz-place ...
input placeholder的样式
在input框中有时想将输入的字和placeholder设为不同的颜色或其它效果,这时就可以用以下代码来对placeholder进行样式设置了. ::-webkit-input-placeholder ...
css3 placeholder 特效,css3如何设置placeholder的样式
本篇文章给大家带来的内容是介绍如何使用css3设置placeholder的样式,让大家了解placeholder是什么,如何使用,如何修改修改(设置)其样式.有一定的参考价值,有需要的朋友可以参考一下 ...
ace-admin图标样式设置
背景:虽然博主手头的项目前端框架是使用的ace-admin,但是基本上都是写的后台业务逻辑,所以对于前台样式修改之类的倒是没怎么上心,偶然想要修改一个图标的样式,网上搜下讲解ace-admin的资料很 ...
SVG基本形状及样式设置
前面的话图形分为位图和矢量图.位图是基于颜色的描述,是由像素点组成的图像:而矢量图是基于数学矢量的描述,是由几何图元组成的图像,与分辨率无关.可缩放矢量图形,即SVG,是W3C XML的分支语言之一 ...
Qt Creator指定代码样式设置
Qt Creator指定代码样式设置指定代码样式设置指定代码样式设置 Qt Creator使用文件的MIME类型来确定用于打开文件的模式和编辑器.Qt Creator在C ++代码编辑器中以&qu ...

placeholder的样式设置

placeholder的样式设置相关推荐

最新文章

热门文章