澳洲幸运5直播天天计划

核彈頭H5小游戲

關閉

核彈頭小游戲

游戲輕松點
無需下載,點開即玩

拿起手機!掃我啊

核彈頭小游戲
無需下載點擊即玩

回到頂部

當前位置: 核彈頭首頁 > 游戲教程 > 正文

html5輸入框提示文字怎么實現

來源:www.kseom.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+。

核彈頭小游戲網發布此文僅為傳遞信息,不代表認同其觀點或者證實其描述!
澳洲幸运5直播天天计划