修改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. SuperSocket学习笔记(二)

    上一篇博客SuperSocket学习笔记(一)说明了怎么快速搭建一个服务器端,这篇文章我想深挖一下SuperSocket 1. 每一个客户端连接到服务器端时,服务器端会将客户端的信息保存到一个Sess ...

  2. PL/SQL语句块提高1+case语句

    set serveroutput on; declare --默认值的bianliang v_a ; -- v_b integer; --用stud.id 的类型 v_id stud.id%type; ...

  3. ORACLE SQL 组函数【weber出品必属精品】

    组函数:对一组数据进行加工,每组数据返回一个值 常用的组函数:count()  avg()  max()   min()  sum()   count()函数  1. count(*) :返回总共的行 ...

  4. NSArray使用小结

    http://blog.csdn.net/ms2146/article/details/8654263

  5. Objective-C文件和目录操作,IOS文件操作,NSFileManager使用文件操作

    http://blog.csdn.net/swingpyzf/article/details/15185767

  6. js 计算某年某周日期范围

    <HTML><HEAD><script type="text/javascript"> //目前只判断了4位有效输入的年份,//日期输出格式已处 ...

  7. 抽空通过简书网学习了一下console,感觉高大上!

    抽空看了一下简书中关于console的文章,为了便于自己今后查看,自己写了一遍!原文地址:http://www.jianshu.com/p/f961e1a03a56 测试代码在最下面 1.consol ...

  8. (原)ubuntu16重装显卡驱动后,torch中的问题

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6030232.html 参考网址: https://github.com/torch/cutorch/i ...

  9. Oracle 10g体系结构及安全管理

    (1)               Oracle数据库服务器:数据库,实例 (2)               数据库:(1)物理存储—数据文件,控制文件,日志文件,(2)逻辑存储—表空间,段,区间, ...

  10. php性能效率优化

    [size=5][color=Red]php性能效率优化[/color][/size] 最近在公司一边自学一边写PHP程序,由于公司对程序的运行效率要求很高,而自己又是个新手,一开始就注意程序的效率很 ...