说到这个两个属性::placeholder大家可能都很熟悉,在移动端以及高端浏览器中都有使用,但是:placeholder-shown可能了解的比较少,本篇文章将和大家一起探讨两者的不同及基本应用. placeholder 即”占位符”,在form表单input/ textarea上可以应用placeholder属性,如果你对伪类和伪元素的异同不甚了解,可以参考“CSS伪类和伪元素的异同”.下面就来讲讲二者的不同:

一. 伪类与伪元素

:placeholder-shown 伪类, Selectors Level 4 草案新增 ::placeholder 伪元素,CSS Pseudo-Elements Module Level 4 新增

:placeholder-shown, being a pseudo-class, has to select an existing element - it selects the input whenever you’re in the placeholder-showing state. The ::placeholder pseudo-element wraps the actual placeholder text.

二. 兼容性

:placeholder-shown Chrome/Safari/Opera浏览器支持较好,移动端浏览器支持较差,参考链接: CanIUse ::placeholder 现代浏览器基本都支持, 但是需要添加不同浏览器厂商前缀,IE10 以下浏览器不支持, 参考链接:CanIUse

三. 开发中使用

:placeholder-shown, 常用来设置input 没有输入时的提示,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
<style type=”text/css”>
.text {
    width: 400px;
    height: 22px;
    line-height: 22px;
    border: 1px solid #ccc;
}
.demo:placeholder-shown {
    border-color: #00f; // 无输入时,边框显示蓝色
    color: #f00; // 只对无输入时的光标颜色有效
}
</style>
<input type=”text” class=”demo” placeholder=”请输入用户名称”>

::placeholder ,常用来设置placeholder text文本的颜色,根据不同浏览器支持情况设置前缀:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style type=”text/css”>
.text {
    width: 400px;
    height: 22px;
    line-height: 22px;
    border: 1px solid #ccc;
}
::-webkit-input-placeholder { / Chrome/Opera/Safari /
    color: #f00;
}
::-moz-placeholder { / Firefox 19+ /
    color: #f00;
}
:-ms-input-placeholder { / IE 10+ /
    color: #f00;
}
:-moz-placeholder { / Firefox 18- /
    color: #f00;
}
</style>
<input type=”text” class=”demo” placeholder=”请输入用户名称”>

那么你可能会问,如果我想兼容IE10以下浏览器该怎么办呢,那只能用js来实现了，有个开源的placeholder.js可以参考.

四. 支持的Styles

::placeholder 支持下面这些属性:(注意:不支持text-align属性) All properties that apply to the ::first-line pseudo-element also apply to the ::placeholder pseudo-element, eg: font properties color background properties word-spacing letter-spacing text-decoration vertical-align text-transform line-height text-indent opacity ::placeholder-shown ,支持的属性较多,使用起来也比较灵活,(支持text-align属性).

五. 补充如何实现select 元素placeholder

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style type=”text/css”>
.sel-placeholder {
    color: #999; / 和input::placeholder 默认颜色一致 /
}
.sel-placeholder option {
    color: #333;
}
.sel-placeholder option:first-child {
    color: #999; / 第一个选项的颜色 /
}
</style>
<form action=”http://user/submit" method=”post”>
    <select name=”children”>
        <option disabled selected>请选择子女个数</option>
        <option value=”1”>1</option>
        <option value=”2”>2</option>
        <option value=”3”>3</option>
        <option value=”4”>4</option>
    </select>
    <input type=”submit” value=”Submit”>
</form>

可以通过js 增加和删除类来改变选中是的select字体颜色. 当然,还有的像如下这样用的:

1
2
3
4
5
6
7
8
9
10
<form action=”http://user/submit" method=”post”>
    <select name=”children”>
        <option selected hidden>select one</option>
        <option value=”1”>1</option>
        <option value=”2”>2</option>
        <option value=”3”>3</option>
        <option value=”4”>4</option>
    </select>
    <input type=”submit” value=”Submit”>
</form>

如果你想知道有什么不同,可以写个实例运行下.

转载申请

本作品采用知识共享署名 4.0 国际许可协议进行许可，转载时请注明原文链接，文章内图片请保留全部内容。