html手册 css手册
购物车
登陆 / 注册
微信扫码登陆
免费注册
CSS 教程手册（新）
CSS 教程手册（新）
+
CSS 入门教程
CSS速查总表
CSS 教程学习导读
CSS简介
CSS语法
CSS 创建
+
CSS 定位(Position)
+
CSS 布局(Layout)
+
CSS 尺寸 (Dimension)
+
CSS 外边距(Margin)
+
CSS 填充（Padding）
+
CSS 背景(Backgrounds)
+
CSS 边框(Border)
+
CSS 颜色(Color)
+
CSS 字体(Fonts)
+
CSS 文本(Text)
+
CSS 文本装饰(Text Decoration)
+
CSS 书写模式(Writing Modes)
+
CSS 列表样式(List)
+
CSS 表格(Table)
+
CSS 内容(Content)
+
CSS用户界面(User Interface)
+
CSS打印(Print)
+
CSS媒体查询(Media Queries)
CSS 链接(Link)
+
CSS 轮廓（Outline）
CSS 分组 和 嵌套(Grouping and Nesting)
CSS 浮动 (Float)
CSS 盒子模型（Box Model）
CSS 显示(Display)
CSS 导航栏(Navigation Bar)
CSS 溢出(Overflow)
CSS 下拉菜单(Drop down menu)
CSS 对齐(Align)
CSS 提示工具(Prompt Tool)
CSS 图片廊(Image Gallery)
+
CSS 图像透明/不透明(Opacity)
CSS 图像拼合技术(Image stitching technique)
CSS 媒体类型(Media Type)
+
Only IE
+
Only Webkit
+
Only Firefox
CSS 总结
+
CSS 原生手册
CSS 手册导读
CSS 选择器
CSS 听觉参考手册
CSS Web安全字体组合
CSS 动画
CSS 函数
CSS 单位
CSS 颜色
+
CSS 颜色值
CSS 颜色名
CSS 颜色十六进制
+
CSS 函数 Function
CSS attr() 函数
CSS calc() 函数
CSS linear-gradient() 函数
CSS radial-gradient() 函数
CSS repeating-linear-gradient() 函数
-
CSS选择器 Selectors
+
元素选择符
+
关系选择符
+
属性选择符
+
伪类选择符
-
伪对象选择符
+
CSS取值与单位 Values and Units
+
CSS 长度(Length)
+
CSS 角度(Angle)
+
CSS 时间(Time)
+
CSS 频率(Frequency)
+
CSS 布局(Layout-specific)
+
CSS 分辨率(Resolution)
+
CSS 文本(Textual)
+
CSS 函数(Functional)
+
CSS 生成内容(Content)
+
CSS 图像(Image)
+
CSS 数字(Numeric)
+
CSS语法与规则 Rules
!important
comment
@import
@page
@supports
+
CSS 属性 Property
border-top
scan
border-top-color
overflow-wrap
border-top-left-radius
text-size-adjust
border-top-right-radius
text-decoration-skip
text-underline-position
border-top-style
column-break-before
border-top-width
column-break-after
border-width
column-break-inside
bottom
text-fill-color
box-align
box-reflect
box-direction
tap-highlight-color
user-drag
box-flex
border-colors
box-flex-group
border-top-colors
box-lines
border-right-colors
box-ordinal-group
border-bottom-colors
border-left-colors
box-orient
scrollbar-3dlight-color
box-pack
scrollbar-darkshadow-color
box-shadow
scrollbar-highlight-color
box-sizing
scrollbar-shadow-color
caption-side
scrollbar-arrow-color
clear
scrollbar-arrow-color
clip
scrollbar-face-color
color
scrollbar-track-color
column-count
scrollbar-base-color
column-fill
behavior
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
grid-columns
grid-rows
hanging-punctuation
height
icon
justify-content
@keyframes
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
nav-down
nav-index
nav-left
nav-right
nav-up
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
position
punctuation-trim
quotes
resize
right
rotation
tab-size
table-layout
target
target-name
target-new
target-position
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-outline
text-overflow
text-shadow
text-transform
text-wrap
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
unicode-bidi
pointer-events
vertical-align
user-select
visibility
ime-mode
white-space
zoom
width
-webkit-appearance
word-break
@charset
word-spacing
text-stroke
word-wrap
text-stroke-width
z-index
text-stroke-color
writing-mode
<angle>
deg
​grad
rad
turn
s
align-content
ms
<frequency>
align-items
Hz
align-self
kHz
all
<fraction>
animation
<grid>
animation-delay
fr
animation-direction
gr
animation-duration
<resolution>
animation-fill-mode
dpi
animation-iteration-count
dpcm
dppx
animation-name
unset
animation-play-state
<string>
<url>
animation-timing-function
<identifier>
appearance
calc()
backface-visibility
toggle()
background
counter()
background-attachment
counters()
attr()
<image>
background-blend-mode
image()
background-clip
image-set()
background-color
<gradient>
background-image
repeating-radial-gradient()
background-origin
<integer>
background-position
<percentage>
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
page
border-image-slice
page-break-before
border-image-source
page-break-after
page-break-inside
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
device-width
border-right-color
device-height
border-right-style
orientation
border-right-width
aspect-ratio
border-spacing
device-aspect-ratio
border-style
color-index
monochrome
initial
inherit
RGBA
Color Name
HEX
RGB
HSL
HSLA
transparent
currentColor
<length>
em
ex
ch
rem
vw
vh
vmax
vmin
cm
mm
q
in
pt
pc
px
<number>
+
CSS附录 Appendix
颜色关键字(Color Keywords)
媒体类型(Media Types)
+
CSS HACK
条件Hack
属性级Hack
选择符级Hack
+
问题和经验
Bugs及解决方案列表
CSS技巧和经验列表
其它技巧和经验列表
参考资源列表

推荐手册

CSS 教程手册（新） >> CSS选择器 Selectors >> 伪对象选择符
其他教程参考

::placeholder选择器

::placeholder选择器
设置对象文字占位符的样式
前端控 前端控 更新时间：2019-03-21 17:59:02

::placeholder

语法：

E::placeholder { sRules }

说明：

设置对象文字占位符的样式。
  • ::placeholder 伪元素用于控制表单输入框占位符的外观，它允许开发者/设计师改变文字占位符的样式，默认的文字占位符为浅灰色。
  • 当表单背景色为类似的颜色时它可能效果并不是很明显，那么就可以使用这个伪元素来改变文字占位符的颜色。
  • 需要注意的是，除了Firefox是 ::[prefix]placeholder，其他浏览器都是使用 ::[prefix]input-placeholder

  • Firefox支持该伪元素使用text-overflow属性来处理溢出问题。

::placeholder的使用示例:

<input type="text" placeholder="占位符"/>input::-webkit-input-placeholder {
	color: #999;
}
input:-ms-input-placeholder { // IE10+
	color: #999;
}
input:-moz-placeholder { // Firefox4-18
	color: #999;
}
input::-moz-placeholder { // Firefox19+
	color: #999;
}

兼容性：

浅绿 = 支持

红色 = 不支持

粉色 = 部分支持

IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome
6.0-9.02.0-3.6

4.0-

43.0-webkit-

3.1-4.0

15.0-

28.0-webkit-

3.2-4.1

2.1

-4.4.4-webkit-

18.0

-40.0-webkit-


10.0-

11.0-ms-


4.0

-18.0-moz- 

#1

5.0

-8.1-webkit-

4.3

-8.1-webkit-


19.0-

38.0-moz- 


#1表示::-moz-placeholder 伪元素在Firefox 19+替代了之前的 :-moz-placeholder 伪类

实例

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<style>
input::-webkit-input-placeholder {
  color: green;
}
input:-ms-input-placeholder { // IE10+
  color: green;
}
input:-moz-placeholder { // Firefox4-18
  color: green;
}
input::-moz-placeholder { // Firefox19+
  color: green;
}
</style>
</head>
<body>
  <input id="test" placeholder="Placeholder text!">
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


网站导航
标签地图
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ官方交流群
微信公众号
微信公众号
Copyright © 2018-2019 html中文网 All Rights html中文网，专注于大前端知识，一站式WEB前端开发自学平台！
工信部备案号： 皖ICP备18014864号-5    
提交