在很多网站上我们都看到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
暂无“html中input提示文字样式修改的示例代码”评论...
更新动态
2024年05月13日
2024年05月13日
- 呼吸 Breathe
- 下一站江湖2不水芸丹怎么获得 获取方式分享
- 物华弥新洛神赋图装备深造加点攻略
- 元气骑士前传如何解锁机械改造介绍
- dnf出血流完美自定义
- 星穹铁道2.2把历史装进瓶子怎么达成 把历史装进瓶子隐藏成就攻略
- dnf公会硬币怎么获得
- 《宝可梦:朱/紫》新神秘礼物!可得亚洲锦标赛暴鲤龙
- 任天堂新项目“U-King-O”引发热烈猜想 或是NS2增强版
- 全球多地均有机会观赏到极光这一自然奇观 一起来看!
- [DG477946-4_CD01]莫扎特:小提琴协奏曲Nos.35【FLAC】
- [DG477946-4_CD02]贝多芬:小提琴协奏曲Op.61【FLAC】
- 群星《东方之珠I-來自你、來自我、來自他》+11CD[wav]
- 林俊杰演唱会观众大喊退票 大麦回应:会将问题反馈给主办方
- 滴滴回应7分钟路程收1414元:费用异常 应为14元