腾讯分分彩开奖记录:重庆时时彩开奖记录

关闭

核弹头小游戏

游戏轻松点
无需下载,点开即玩

拿起手机!扫我啊

核弹头小游戏
无需下载点击即玩

回到顶部

当前位置: 重庆时时彩开奖记录 > 游戏教程 > 正文

html5输入框提示文字怎么实现

重庆时时彩开奖记录 www.iogb5.com.cn 来源:重庆时时彩开奖记录 www.iogb5.com.cn    作者:集   时间:2016-04-27

如何让input输入框背景有文字提示效果呢?本文小编为你带来详细解析。

这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的。但HTML5给我们提供了新的纯HTML的实现方式,不需要任何的JavaScript,只需要在你的input文本框的标记上添加HTML5规范里新增的placeholder属性,然后在属性值里输入你需要的提示信息。

语法基本是这个样子:input placeholder=”提示信息...”

HTML代码

<form>
<input type="text" placeholder="你的姓名..." name="lname">
<input type="password" placeholder="你的密码..." name="pass">
<input type="submit" value="提交">
</form>

用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+。

核弹头小游戏网发布此文仅为传递信息,不代表认同其观点或者证实其描述!
  • 黄渤挑战苏绣“一出好戏” 2019-06-18
  • 民政厅“挪公款盖私房”实属集体腐败 2019-06-18
  • 最高法发布互联网公开审判流程信息规定 9月1日起施行 2019-06-17
  • 秘鲁丹麦世界排名靠前且接近 两队目标:小组第二 2019-06-16
  • 北京朝阳百子湾南一路发生车祸致2死3伤 2019-06-16
  • 头发-热门标签-华商生活 2019-06-15
  • 凯恩率“三狮军团”艰难战胜突尼斯 2019-06-14
  • 美国商团在涉华听证会前密集建言反对美对华关税计划 2019-06-13
  • 路上安全  警钟长鸣:宝马SUV闯红灯  十字路口被面包车顶翻 2019-06-13
  • 西藏积极开展防沙治沙宣传 建设美丽西藏 2019-06-12
  • 不是特效!上港队长一脚踢中海鸥 这脚法简直坑爹 2019-06-11
  • 一切都是老板炒工人的鱿鱼 2019-06-11
  • 黄河壶口瀑布水量大增 主副瀑布连成一线 2019-06-10
  • 江西颁发首张基层群众性自治组织特别法人统一社会信用代码证 2019-06-09
  • “云南导游辱骂威胁游客案”一审宣判:游客消费不达标  导游言语侮辱 2019-06-09
  • 547| 333| 90| 342| 427| 868| 745| 621| 384| 405|