CSS - 设置placeholder样式

1.第一种最简单的写法：在谷歌浏览器中使用

textarea::placeholder {font-size: 12px;font-family: Arial;letter-spacing: 5px;color: #919191 !important;padding-left: 13px;padding-top: 9px;}input::placeholder {font-size: 12px;font-family: Arial;letter-spacing: 5px;color: #919191 !important;padding-left: 13px;padding-top: 9px;}

2.第二种写法：

注：因为不同浏览器的兼容性不同，所以在写代码方面也会有所差别。

input::-webkit-input-placeholder{   /* 使用webkit内核的浏览器 */color: #E0484B;
}
input:-moz-placeholder{    /* Firefox版本4-18 */color: #E0484B;
}
input::-moz-placeholder{    /* Firefox版本19+ */color: #E0484B;
}
input:-ms-input-placeholder{   /* IE浏览器 */color: #E0484B;
}

注：冒号前可写相对应的input或textarea元素等，也可以省略不写，直接冒号开头

3.第三种写法：

input[type='text']::-webkit-input-placeholder{   /* 使用webkit内核的浏览器*/color: #E97F81;
}
input[type='text']:-moz-placeholder{    /* Firefox版本4-18 */color: #E0484B;
}
input[type='text']::-moz-placeholder{    /* Firefox版本19+ */color: #E0484B;
}  input[type='text']:-ms-input-placeholder{   /* IE浏览器 */color: #E0484B;
}

注：第三种写法中的text是相对应html中的text，如果是密码框，那么相对应的就是password。

<input type="password" placeholder="字体颜色为红色">

input[type='password']::-webkit-input-placeholder{   /* 使用webkit内核的浏览器*/color: #E97F81;
}

本文参考

CSS - 设置placeholder样式相关推荐

html根据菜单角色配置菜单代码,CSS设置列表样式和创建导航菜单实现代码
一.设置列表的符号 list-style-type: 属性://设置列表样式 list-style-type: none; //清楚样式属性有很多可以自己去试:circle,disc,decimal ...
css设置按钮样式_使用CSS设置按钮样式的快速指南
css设置按钮样式 by Ashwini Sheshagiri 通过Ashwini Sheshagiri Buttons have become an inevitable part of front ...
css 设置 table 样式：表头固定，内容垂直方向滚动
css 设置 table 样式:表头固定,内容垂直方向滚动一.需求二.实现一.需求需要实现下面样式的表格,其中,表头固定.内容垂直方向滚动.鼠标悬停高亮.点击高亮. 基本样式可参考 w3sch ...
input 去除边框/设置placeholder样式--SCSS
input 去除边框/设置placeholder样式–SCSS .el-input_edit ::v-deep{input::-webkit-input-placeholder {font-size: ...
php文章列表样式,css列表样式有哪些？css设置列表样式的方法
关于列表的css样式有哪些以及如何设置css列表样式?接下来的这篇文章将为大家介绍关于css列表样式的内容. 1.css有序列表(ol)和css无序列表(ul) list.html 列表样式水果苹 ...
css设置打印样式表,[CSS] 创建打印样式表
[CSS] 创建打印样式表 Chrome浏览器有一项非常好用的功能, 就是直接将网页保存为PDF(Ctrl+P), 虽然部分人觉得没有用, 但我经常使用这个功能比如说, 有的博文写得不错, 想保存, ...
【Web应用开发】实验三：利用CSS设置网页内容样式
文章目录一.实验目的二.实验内容三. 网页效果展示四.小结一.实验目的了解CSS的基本含义及其基本用法: 掌握CSS样式应用的四种方法:行内样式.内嵌式.链接式.导入式: 了解CSS选择器 ...
CSS设置滚动条样式
今天在写一个项目的时候遇到了,这样一个小难点要设置一个类似于页面的滚动条,查阅了相关文档之后,我会了一.我们可以使用overflow属性设置是否出现滚动条overflow:scroll /* x ...
考虑到可访问性，使用 CSS 设置按钮样式
按钮在网站上有很多用途--有用于悬停在图像上和在网页上导航的大按钮,以及用于显示有关您的产品或服务的信息的更微妙的按钮. 然而,按钮甚至可以吓倒经验丰富的网页设计师. 按钮有许多可能需要很长时间才能掌 ...
CSS（十一）——用CSS设置超链接样式
目录 1.使用CSS伪类别来设置超链接样式 1.1普通的.未被访问的链接 1.2用户已访问的链接

CSS - 设置placeholder样式

1.第一种最简单的写法：在谷歌浏览器中使用

2.第二种写法：

3.第三种写法：

CSS - 设置placeholder样式相关推荐

最新文章

热门文章