html5显示字幕信息,HTML5 Placeholder实现input背景文字提示效果
本文作者html5tricks,转载请注明出处
这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示:
这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的。但input文本框的标记上添加HTML5规范里新增的placeholder属性,然后在属性值里输入你需要的提示信息。
语法基本是这个样子:
HTML代码
用CSS美化Placeholder提示信息的样式
CSS3里有相应的通用的对Placeholder提示信息美化的方法。你可以设置提示信息文字的颜色,透明度,背景色等。
为了最大化的兼容所有浏览器,给CSS里的placeholder属性添加浏览器引擎前缀还是有必要的。
- 谷歌浏览器(Webkit): ::-webkit-input-placeholder pseudo-element;
- IE10: :-ms-input-placeholder pseudo-class;
- 火狐浏览器(Gecko18-): :-moz-placeholder pseudo-class;
- 火狐浏览器(Gecko19+): ::-moz-placeholder pseudo-element;
- Opera(Presto): 无。
/* WebKit browsers */
::-webkit-input-placeholder {
color: #777;
}
/* Mozilla Firefox 4 to 18 */
:-moz-placeholder {
color: #777;
opacity: 1;
}
/* Mozilla Firefox 19+ */
::-moz-placeholder {
color: #777;
opacity: 1;
}
/* Internet Explorer 10+ */
:-ms-input-placeholder {
color: #777;
}
对Placeholder的浏览器支持情况
各种浏览器对HTML5/CSS3里出现的新特征、新属性的支持是逐步提高的,最终所有的浏览器都会完全支持HTML5/CSS3,这是毫无疑问的。目前,对HTML5的placeholder属性支持的浏览器有谷歌浏览器、火狐浏览器、Safari、Opera,还有IE10+。
html5显示字幕信息,HTML5 Placeholder实现input背景文字提示效果相关推荐
- html5背景文字,HTML5 Placeholder实现input背景文字提示效果
这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的.但HTML5给我们提供了新的纯HTML的实现方式,不需 ...
- HTML5 Placeholder实现input背景文字提示效果
这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的.但HTML5给我们提供了新的纯HTML的实现方式,不需 ...
- html5 搜索提示文字,HTML5网页placeholder美化input背景提示文字教程
这篇文章主要为大家详细介绍了HTML5网页placeholder美化input背景提示文字教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴. 今天要给大家介绍的 ...
- AE492 10组2D卡通元素动画字幕标题手绘烟雾MG图形文字入场效果ae模板
AE492 10组2D卡通元素动画字幕标题手绘烟雾MG图形文字入场效果ae模板 [模板介绍] 模板用途:二维,动画,卡通,彩色,手绘,歌词,个人品牌,幻灯片,流畅,故事,文字,文字动画,文字外观,标题 ...
- [Extjs6]随记-使用h5的placeholder给编辑框添加提示效果
{ xtype : 'textfield', id: 'ShuJuZiDianManageKeyWordId', width : 250, listeners:{ ...
- 我的世界会员特效在服务器显示,腐竹教你在游戏中制作登录提示效果
来源:游戏园日期:2019-02-03 04:01:08 今天小编为大家带来我的世界登入提示教程,让大家知道登入提示怎么才能在游戏中显示出来,让你的服务器高大上! 这个东西做完以后成品是这样的: 1. ...
- elementui 表格表头竖着显示_ElementUI中table表格自定义表头Tooltip文字提示
picture table-header-tips 应用 element 中的 table 组件,自定义表头 Tooltip 文字提示. 效果图 效果图 示例 demo 代码 引用 element-u ...
- html5资源怎么用,HTML5教程
分类目录归档:HTML5教程 3,744 人浏览 2019-01-08 21:28:17 今天给大家分享一个效果很棒的HTML Canvas火焰画笔动画类似,也是在Canvas上通过鼠标绘制而成.这个 ...
- html5输入框自动放大镜,JS 仿支付宝input输入显示数字放大镜
本文就为大家带来一篇JS 仿支付宝input文本输入框放大组件的实例.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希望能帮助到大家. input输入的时候可以在后边显 ...
最新文章
- 调剂女人身材的十种食物
- 【问题解决方案】ImportError: No module named 'openpyxl'/‘xlrd’
- 使用 yo 命令行向导创建 SAP UI5 应用
- 稳定高效大型系统架构---集群中间件开发
- jsp中@import导入外部样式表与link链入外部样式表的区别
- jq之$(“*“)隐藏所有元素
- Java网络编程————UDP实现ThinkPad S5网络唤醒
- 【nodejs原理源码赏析(2)】KOA中间件的基本运作原理
- 关于我的文章说明及联系方式
- plsa java代码_LDA主题聚类学习小结
- c#使用资源文件完成国际化
- 计算机CG技术未来发展前景,CG就业前景怎么样?
- MacOS 10.14.5单双面打印设置
- 打印机显示服务器脱机是什么原因,打印机显示“脱机”的原因和解决办法
- Matlab Coder杂记
- 判断时间复杂度和空间复杂度
- 解读《Superhuman AI for multiplayer poker》
- canvas实现3D魔方
- 微信最近点赞拿东西服务器,微信朋友圈点赞说明什么?点赞的行为背后隐藏着什么含义呢?...
- Qt版电子词典(qss)
热门文章
- python 函数装饰器学习
- 【算法与数据结构】中缀表达式转为后缀表达式
- 如何使用JCA (J2EE 连接器架构)实现企业应用--转载
- Bash For Loop Examples for Your Linux Shell Scripting--ref
- 太疯狂, 2021年涨幅第一,房价几天翻一倍, 全球炒房客都来了
- DeepMind哈萨比斯对话哈里王子:2018年AI最大的突破在生物或化学 2017-12-29 新智元 新智元报道 编辑:刘小芹 胡祥杰 【新智元导读】BBC 电台第四台连续第14年在
- 不到 200 行代码,教你如何用 Keras 搭建生成对抗网络(GAN)
- 【深度学习】caffe 中的一些参数介绍
- 每日一博 - CAS(Compare-And-Swap)原理剖析
- Netty - I/O模型之NIO