图文详解placeholder属性的使用方法以及如何修改placeholder的默认样式

2024-01-17 13:37 小编
placeholder是HTML5中新增的一个属性。placeholder可以用来描述输入字段预期值的简短的提示信息。提示信息会在用户输入值之前显示,一旦用户输入信息该提示就会自动消失。比如:我们在登录时需要输入用户名和密码,它会提示你什么地方输入用户名,什么地方输入密码,这个就是使用的placeholder属性。
    注意:placeholder属性适用于下面的input类型:text、search、url、tel、email和password。
    一、placeholder属性怎么用
    语法:placeholder="你想要提示的内容"
    可以直接在需要提示的input输入框中加上placeholder属性,比如:<inputtype="text"name="name"placeholder="请输入用户吗">
    <inputtype="text"id="input"placeholder="请输入用户名"/>
    效果图:
    placeholder1.jpg
    如图所示,input输入框里面提示用户输入用户名
    二、placeholder属性修改
    当placeholder属性默认的颜色,样式等不能满足我们的需要时,需要修改它的样式。
    写法:input::-webkit-input-placeholder{你想要修改的样式}
    因为placeholder是HTML5中新增加的属性,需要注意浏览器的兼容性。
    ::-webkit-input-placeholder{}/*使用webkit内核的浏览器*/
    :-moz-placeholder{}/*Firefox版本4-18*/
    ::-moz-placeholder{}/*Firefox版本19+*/
    :-ms-input-placeholder{}/*IE浏览器*/
    举例:修改placeholder样式,将input提示框中文字的颜色设为红色,字体设为20px,让文字在输入框中水平居中显示。代码如下
    HTML部分:
    <inputtype="text"id="input"placeholder="请输入用户名"/>
    CSS部分:
    input{width:200px;height:40px;}
    #input::-webkit-input-placeholder{
    color:red;
    font-size:20px;
    text-align:center;
    }
    #input:-moz-placeholder{
    color:red;
    font-size:20px;
    text-align:center;
    }
    #input:-ms-input-placeholder{
    color:red;
    font-size:20px;
    text-align:center;
    }


Tag: 如何 方法
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码