龙喵专栏 /前端 /内容

更改input框中placeholder颜色样式及如何隐藏placeholder

版权声明:龙喵网!!!网站网址:http://ailongmiao.com

CSS3里提供了专门的规则属性来美化用placeholder实现的input输入框的背景提示信息。下面我们来看看如何用专用的CSS属性来美化具有placeholder属性的Input输入框。

placeholder 定义和用法

placeholder 属性提供可描述输入字段预期值的提示信息(hint)。

该提示会在输入字段为空时显示,并会在字段获得焦点时消失。

注释:placeholder 属性适用于以下的 <input> 类型:text, search, url, telephone, email 以及 password。

语法

<input type="text" name="first_name" placeholder="你的姓名..." />

placeholder的样式设置

在input框中有时想将输入的字和placeholder设为不同的颜色或其它效果,这时就可以用以下代码来对placeholder进行样式设置了。

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

注1:冒号前写对应的input或textarea元素等。
注2:placeholder属性是css3中新增加的属性,IE9和Opera12以下版本的CSS选择器均不支持占位文本。

实例:

input::-webkit-input-placeholder { 
    /* WebKit browsers */ 
    padding-left: 5px;
    font-size:14px;
    color: #f00;
} 
input::-moz-placeholder { 
    /* Mozilla Firefox 19+ */ 
    padding-left: 5px;
    font-size:14px;
    color: #f00;
} 
input:-ms-input-placeholder { 
    /* Internet Explorer 10+ */
    padding-left: 5px; 
    font-size:14px;
    color: #f00;
}

效果

input 获取焦点清空 placeholder

方法1:

<input type="text" placeholder="请输入" onfocus="this.placeholder=‘‘" onblur="this.placeholder=‘请输入‘">

方法2:

input:focus::-webkit-input-placeholder{color: transparent;}
input:focus:-moz-placeholder{color: transparent;}
input:focus::-moz-placeholder{color: transparent;}
input:focus:-ms-input-placeholder{color: transparent;}

参考:

HTML5 placeholder实际应用经验分享及拓展

版权声明:龙喵网!!!网站网址:http://ailongmiao.com

1.部分文章来自网络,如有侵犯权益,请联络博主,资源失效与内容勘误留言说明.

2.如若转载,请注明出处:http://ailongmiao.com/read/314.html

[ web前端导航 ]:http://ailongmiao.com/web/

相关阅读

    评论

    继续阅读

    细数CSS伪元素及其用法

    Web前端 2019-03-29 1

    CSS中有两个很常见的概念,伪类和伪元素。伪类用于在页面中的元素处于某个状态时,为其添加指定的样式。伪元素会创建一个抽象的伪元

    GET和POST的区别

    Web前端 2019-03-11 6

    最近看了一些同学的面经,发现无论什么技术岗位,还是会问到 get 和 post 的区别?让我们先看一下标准答案长什么样子 w3school: GET

    彻底解决滚动穿透方案

    Web前端 2019-02-15 7

    有一层遮罩蒙层覆盖在body上时,当我们滚动遮罩层,它下面的内容也会跟着一起滚动,看起来好像是上面的滚动事件穿透到下面的DOM元素上

      选择打赏方式

    打赏

    打赏