在很多网站上我们都看到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('');" />
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
暂无“html中input提示文字样式修改的示例代码”评论...
更新日志
2024年05月13日
2024年05月13日
- 腐花之雨 花腐し
- 原画壁纸及美图第221期,无水印可自取
- 八重神子角色攻略,八重神子天赋及圣遗物
- 八重神子角色培养心得,八重神子武器推荐
- 崩坏星穹铁道巨星巅峰战任务怎么做 完成方式分享
- 明日方舟罗德岛促融共竞怎么玩 新模式即将开启
- 淡墨水云乡食谱配方大全2024 最新菜谱分享
- 逆水寒手游承影剑获得方法 逆水寒手游承影剑获得方法图
- 逆水寒手游英雄幻域开荒技巧 逆水寒手游游戏攻略
- 逆水寒手游雪景寒林图修补方法 逆水寒手游雪景寒林图具体修补办法
- 《动物井》Steam全部评测为好评如潮!好评率达97%
- 坤哥爆料 十分可靠:索尼或于5月公布《战神5》PC版
- 玩家仍需等待!《哈迪斯2》的真正结局还没制作出来
- 【ABC唱片】《五亿琴王SACD-034》[WAV+CUE]
- 【ABC唱片】殷秀梅《传奇再现之殷秀梅》SACD[WAV+CUE]