Sample code for modifying the input prompt text style in html

On many websites, we have seen the input box display hint text. Let’s take a look at how to display hint text in the input box. We only need to add: placeholder="prompt text" in the <input> tag, so what if we want to change the style of the prompt text? You can set the css style like this:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>input box prompt text</title>
<style>
/*Change the color of the prompt text*/
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="Please enter your username" />
</body>
</html>

The modified prompt text style is as follows:

PS: Let's take a look at the required attribute prompt text modification of the input tag in HTML5

When submitting a form, we sometimes encounter such a requirement. When the user submits without entering the required information, the prompt text needs to be changed to the prompt information we want. In this case, we can add the following statement in the input:

<input type="text" placeholder="Your name" required oninvalid="setCustomValidity('Please enter your name');" oninput="setCustomValidity('');" />

This is the end of this article about modifying the input prompt text style in html. For more relevant html input text style content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

<<: How to use position:sticky to perfectly solve the problem of small programs adhering to the ceiling

>>: Sharing some wonderful uses of wxs files in WeChat applet