Home  >  Article  >  Web Front-end  >  深入CSS属性(八): ::placeholder VS :placeholder-shown_html/css_WEB-ITnose

深入CSS属性(八): ::placeholder VS :placeholder-shown_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-21 08:55:341498browse

说到这个两个属性::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 没有输入时的提示,如下:

<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文本的颜色,根据不同浏览器支持情况设置前缀:

<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属性多浏览器支持兼容性方案“, 当然还有个开源的 placeholder.js可以参考.

四. 支持的Styles

::placeholder 支持下面这些属性:(注意:不支持text-align属性) All properties that apply to thepseudo-element also apply to thepseudo-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

<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字体颜色. 当然,还有的像如下这样用的:

<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>

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn