html中input提示文字样式修改的示例代码

在很多网站上我们都看到input输入框显示提示文字，让我们一起来看看如果在input输入框中显示提示文字。我们只需要在input> 标签里添加：placeholder="提示文字即可"，那么如果要修改提示文字的样式呢？可以这样设置css样式：

!DOCTYPE htML>
    html>
    head>
    meta charset="UTF-8">
    tITle>
    input输入框提示文字/title>
    style>
/*修改提示文字的颜色*/input::-webkit-input-placeholder {
     /* WebKit browsers */ color: red;
 }
input:-moz-placeholder {
     /* Mozilla Firefox 4 to 18 */ color: red;
 }
input::-moz-placeholder {
     /* Mozilla Firefox 19+ */ color: red;
 }
input:-ms-input-placeholder {
     /* internet Explorer 10+ */ color: red;
 }
    /style>
    /head>
    body>
    input type="text" placeholder="请输入用户名" />
    /body>
    /html>
    

修改后提示文字样式如下：

PS：下面看下HTML5里的input标签的required属性提示文字修改

在做表单提交时我们有时会遇到这样的需求，在用户没有输入必填信息点提交时提示文字需要改为我们想要的提示信息，那么可以在input里面增加这样的语句：

input type="text" placeholder="您的姓名" required oninvalid="setCustomValidity('请输入您的姓名');
    " oninput="setCustomValidity('');
    " />
    

到此这篇关于html中input提示文字样式修改的文章就介绍到这了,更多相关html input 文字样式内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！