
- 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 Placeholder Color for Textboxes in CSS
Using the ::placeholder pseudo-element, we can change the placeholder text color for textboxes.
The syntax of CSS ::placeholder pseudo-element is as follows −
::placeholder { attribute: /*value*/ }
Example
The following examples illustrate CSS :: placeholder pseudo-element.
<!DOCTYPE html> <html> <head> <style> input:last-child::placeholder { color: cornflowerblue; } </style> </head> <body> <input type="text" placeholder="Default color" /> <input type="text" placeholder="Check my new color :D" /> </body> </html>
Output
This will produce the following result −
Example
<!DOCTYPE html> <html> <head> <style> input::placeholder { color: fuchsia; } input { margin: 2%; width: 100%; } div { display: flex; flex-direction: column; margin: 3%; padding: 3%; text-align: center; align-items: center; box-shadow: inset 0 0 30px brown; } button { width: 40%; } </style> </head> <body> <div> <input type="text" placeholder="Normal placeholder" /> <input type="email" placeholder="somenone@somewhere.com" /> <button>dummy btn</button> </div> </body> </html>
Output
This will produce the following result −
- Related Questions & Answers
- How to change the color of the placeholder attribute with CSS?
- How to change an HTML5 input's placeholder color with CSS?
- Change Cursor Color with CSS caret-color
- Change Bullet Color for Lists with ::marker CSS Selector
- How to Change Link Underline Color using text-decoration-color CSS
- How to change the color of active links with CSS
- How to change the color of focused links with CSS
- Using CSS :placeholder-shown to Customize Styles for Empty Text Input
- How to change the color of points for ggplot2 scatterplot using color brewer in R?
- 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 line color in EditText
- How to change bullet colors for lists with CSS?
- Change the color of the bottom border with CSS
Advertisements