Detailed graphic explanation of how to use the placeholder attribute and how to modify the default style of the placeholder

Input boxes are often used during page layout. Sometimes in order to prompt the user to enter correct information, the placeholder attribute needs to be used to explain. This article will tell you how to use the placeholder attribute and how to modify the style of the placeholder attribute. Interested friends can refer to it. I hope it will be helpful to you!

placeholder is a new attribute in HTML5. Placeholder can be used to describe the input field's expected value of a brief message. The prompt is displayed before the user enters the value, and disappears once the user enters the value. For example: when we log in, we need to enter a username and password. It will prompt you where to enter the username and where to enter the password. This is the placeholder attribute used.

Note: The placeholder attribute applies to the following input types: text, search, url, tel, email and password.

1. How to use the placeholder attribute

Syntax: placeholder="The content you want to prompt"

You can enter it directly in the input that needs to be prompted. Add the placeholder attribute to the box, for example:

<input type="text" id="input" placeholder="请输入用户名" />

Rendering:

As shown in the figure, the input input box prompts the user to enter the user name

2. Modify the placeholder attribute

When the placeholder attribute default color , style, etc. cannot meet our needs, we need to modify its style.

Writing: input::-webkit-input-placeholder{the style you want to modify}

Because placeholder is a newly added attribute in HTML5, you need to pay attention to browser compatibility.

::-webkit-input-placeholder{} /* Browsers using webkit kernel*/

:-moz-placeholder{} /* Firefox version 4-18 */

:: -ilez-Placeholder {}/* Firefox version 19*/

##:-MS-Input-Placeholder {}/* ie browser*/

## 举 Example: Modify Placeholder style, set the color of the text in the input prompt box to red and the font to 20px, so that the text is displayed horizontally and centered in the input box. The code is as follows

HTML part:

<input type="text" id="input" placeholder="请输入用户名" />

CSS part:

input{width: 200px;height: 40px;}
#input::-webkit-input-placeholder {
	 color: red;
	 font-size: 20px;
	 text-align: center;
	}
#input:-moz-placeholder {
	color: red;
	font-size: 20px;
	text-align: center;
	}
#input:-ms-input-placeholder {
	color: red;
	font-size: 20px;
	text-align: center;
	}

Rendering:

Summary: The above introduces how to use the placeholder attribute and how to modify the placeholder style. It is relatively simple, but you need to pay attention to browser compatibility. For those of you who have never come into contact with placeholder before, you can try it yourself. I hope it can help you!

The above is the detailed content of Detailed graphic explanation of how to use the placeholder attribute and how to modify the default style of the placeholder. For more information, please follow other related articles on the PHP Chinese website!