- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to change an HTML5 input's placeholder color with CSS?
HTML5 introduced a new attribute called placeholder. This attribute on <input> and <textarea> elements provides a hint to the user of what can be entered in the field.
Here’s an example showing what a placeholder is. The hint to email i.e. email@example.com is placeholder here:
Example
You can try to run the following code to learn how to use placeholder attribute:
<!DOCTYPE HTML> <html> <body> <form action="/cgi-bin/html5.cgi" method="get"> Enter email : <input type="email" name="newinput" placeholder="email@example.com"/> <input type="submit" value="submit" /> </form> </body> </html>
Example
To change the input placeholder color, use CSS.
<!DOCTYPE HTML>
<html>
<style>
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #7F0D10;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #7F0D10;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #7F0D10;
opacity: 1;
}
</style>
<body>
<form action="/cgi-bin/html5.cgi" method="get">
Enter email : <input type="email" name="newinput" placeholder="email@example.com"/>
<input type="submit" value="submit" />
</form>
</body>
</html>
Published on 15-Dec-2017 18:02:02
- Related Questions & Answers
- How to change the color of the placeholder attribute with CSS?
- How to Change Placeholder Color for Textboxes in CSS
- Change Cursor Color with CSS caret-color
- Setting the element's text color using CSS
- How To Change UIView's Border Color And Thickness in Cocoa Touch?
- How to change the menu background color of Tkinter's OptionMenu widget?
- How to change a table's fontsize with matplotlib.pyplot?
- How to change the color of active links with CSS
- How to change the color of focused links with CSS
- Not showing a placeholder for input type=“date” field with HTML5. How to solve it?
- Change the color of top border with CSS
- Change the color of right border with CSS
- Change the Color of Active Links with CSS
- How to Change Link Underline Color using text-decoration-color CSS
- Using CSS :placeholder-shown to Customize Styles for Empty Text Input
Advertisements