修改palceholder内文字的css样式

 ::-webkit-input-placeholder{
color: red;
font-size: 20px;
line-height: 50px;
}

修改class名为test1的元素palceholder内文字css样式

.test1::-webkit-input-placeholder{
color: red;
font-size: 20px;
line-height: 50px;
}

例子:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
input{
height: 50px;
font-size: 14px;
line-height: 50px;
} .test1::-webkit-input-placeholder{
color: red;
font-size: 20px;
line-height: 50px;
} </style>
</head>
<body>
<input class="test1" type="text" placeholder="测试" />
<input type="text" placeholder="测试" />
</body>
</html>

效果图:

至于兼容,加上相应浏览器的前缀

怎么修改placeholder字体的css样式的更多相关文章

  1. jQuery修改class属性和CSS样式

    jQuery修改class属性和CSS样式 class属性修改 类属性即class属性,规定类名. 用类选择器规定样式的时候,需要为元素指定类名,即class属性的值. 注意每个HTML元素只有一个c ...

  2. css 修改placeholder字体颜色字体大小 修改input记住账号密码后的默认背景色

     壹 ❀ 引 本来这个阶段的项目页面都是给实习生妹子做的,我只用写写功能接接数据,但这两天妹子要忙翻译,这个工作阶段也快结束了导致有点慌,只能自己把剩余的几个小页面给写了. 那么做页面的过程中,UI也 ...

  3. 修改html 属性,css样式。

    一 通过修改标签属性来改变它的样式  js设置和获取标签的属性 <script type="text/javascript"> window.onload = func ...

  4. 修改chrome浏览器默认css样式的方法

    最近重新用起了ubuntu kylin,然后又碰到之前让我感到有些难受的一个小问题:用chrome浏览部分网页时,一部分粗体字十分难看,就像是宋体直接加粗那样. 之前就觉得这样看起来很难受,但是找到的 ...

  5. CSS样式----CSS属性:字体属性和文本属性(图文详解)

    本文最初于2015-10-04发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重要内容 CSS的单位 字体属性 文本属性 定 ...

  6. CSS样式----图文详解(二):css属性

    主要内容 CSS的单位 字体属性 文本属性 背景属性 列表属性 盒子模型 定位属性:position.float.overflow.z-index等 导航栏的制作 鼠标的属性cursor 滤镜的介绍 ...

  7. css修改placeholder的样式

    css修改placeholder的样式 input::-webkit-input-placeholder { /* WebKit browsers */ font-size:14px; color: ...

  8. CSS/Compass修改placeholder的文字样式

    在HTML5中,<input>与<textarea>标签支持placeholder属性,用来定义无任何输入时的默认文字. 可以通过CSS修改placeholder的文字样式: ...

  9. CSS如何修改placeholder样式

    项目用经常遇到修改input的placeholder的颜色的需求,这里来看一下placeholder如何用css设置: 原文发布与我的个人博客>> 首先来看一下chrome默认的input ...

随机推荐

  1. 《第一行代码》学习笔记7-活动Activity(5)

    1.Intent中只能指定一个action,但却能指定多个category. 2.使用隐式Intent,不仅可以启动自己程序内的活动,还可以启动其他程序的活动,使得Android应用程序之间 的功能共 ...

  2. BULK INSERT如何将大量数据高效地导入SQL Server

    转载自:http://database.51cto.com/art/201108/282631.htm BULK INSERT如何将大量数据高效地导入SQL Server 本文我们详细介绍了BULK ...

  3. Mysql常用命令记录

    -- 导出数据库: mysqldump -u user_name -p database_name > import_file.sql -- 执行脚本 source database.sql

  4. JasperReport使用心得

    1. JasperReport 报表文件视图化生成工具iReport. iReport做为一个生成JasperReport的视图工具,和我们是使用的大多数报表创建工具没有太大的差别,都是拖控件,搭出报 ...

  5. JS创建对象的七大模式

    1. 工厂模式 function createPerson(name, age, job){var o = new Object();o.name = name;o.age = age;o.job = ...

  6. dedecms likearticle 调用附加表的字段调用方式

    [field:id runphp='yes'] $aid = @me; $row = $GLOBALS['dsql']->GetOne("Select 字段名 From `dede_a ...

  7. CSS3学习之圆角box-shadow,阴影border-radius

    最近经常玩腾讯微博,出来职业习惯,看看它的CSS,里面运用了大量的css3的东东,有一处用到了Data URI,还有css e­xpression有争议的地方,对png24图片的处理也是用滤镜,类似( ...

  8. 文成小盆友python-num2 数据类型、列表、字典

    一.先聊下python的运行过程 计算机是不能够识别高级语言的,所以当我们运行一个高级语言程序的时候,就需要一个“翻译机”来从事把高级语言转变成计算机能读懂的机器语言的过程.这个过程分成两类,第一种是 ...

  9. Gizmos绘制塔防游戏网格

    1.画线脚本写法及地面调整 首先,新建脚本GridMap 新建绘制网格方法(初始数值为10*10) 在类中创建变量 //定义地图宽度 public int m_mapWidth = 10; //地图高 ...

  10. java形参是否会改变实参

    之前一直对java这方面感到困惑---传入的形参是否会影响实参.因为c++有指针,而java没有,所以我做一个测试验证形参是否会影响实参.* 首先第一种情况---基本类型 哈哈,其实结果大概和我想的一 ...