Change input placeholder color darker
I've found you need to override opacity.
::-webkit-input-placeholder { /* WebKit browsers */
color: red;
opacity: 1 !important;
}
Change a HTML5 input's placeholder color with CSS
Implementation
There are three different implementations: pseudo-elements, pseudo-classes, and nothing.
- WebKit, Blink (Safari, Google Chrome, Opera 15+) and Microsoft Edge are using a pseudo-element:
::-webkit-input-placeholder
. [Ref] - Mozilla Firefox 4 to 18 is using a pseudo-class:
:-moz-placeholder
(one colon). [Ref] - Mozilla Firefox 19+ is using a pseudo-element:
::-moz-placeholder
, but the old selector will still work for a while. [Ref] - Internet Explorer 10 and 11 are using a pseudo-class:
:-ms-input-placeholder
. [Ref] - April 2017: Most modern browsers support the simple pseudo-element
::placeholder
[Ref]
Internet Explorer 9 and lower does not support the placeholder
attribute at all, while Opera 12 and lower do not support any CSS selector for placeholders.
The discussion about the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding
on an input
will not get the same background color as the pseudo-element.
CSS selectors
User agents are required to ignore a rule with an unknown selector. See Selectors Level 3:
a group of selectors containing an invalid selector is invalid.
So we need separate rules for each browser. Otherwise the whole group would be ignored by all browsers.
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #909;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #909;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #909;
}
::placeholder { /* Most modern browsers support this now. */
color: #909;
}
<input placeholder="Stack Snippets are awesome!">
change placeholder text color of textarea
For modern browsers, use just the ::placeholder pseudo element:
textarea::placeholder {
color: #0bf;
}
Legacy and modern browsers:
textarea:-moz-placeholder, /* Firefox 18- */
textarea::-moz-placeholder, /* Firefox 19+ */
textarea:-ms-input-placeholder, /* IE 10+ */
textarea::-webkit-input-placeholder, /* Webkit based */
textarea::placeholder { /* Modern browsers */
color: #0bf;
}
<textarea placeholder="test"></textarea>
How to set placeholder color different at different places in code
you can try this :
: ClassName : : placeholder
.name::placeholder
{
color:red;
}
.fname::placeholder
{
color:green;
}
.mname::placeholder
{
color:blue;
}
<input type="text" class="name" placeholder="Enter your Name" name=""></br>
<input type="text" class="fname" placeholder="Enter your father's Name" name=""></br>
<input type="text" class="mname" placeholder="Enter your mpther's Name" name=""></br>
How to set the color of placeholder text?
Nobody likes the "refer to this answer" answers, but in this case it may help: Change an HTML5 input's placeholder color with CSS
Since it's only supported by a couple of browsers, you can try the jQuery placeholder plugin (assuming you can\are using jQuery). It allows you to style the placeholder text via CSS since it's really only a swap trick it does with focus events.
The plugin does not activate on browsers that support it, though, so you can have CSS that targets chrome\firefox and the jQuery plugin's CSS to catch the rest.
The plugin can be found here: https://github.com/mathiasbynens/jquery-placeholder
Cannot change the text color of Angular material input placeholder
To change the css of your placeholder
, all you need to do is modify the color of your matInput
placeholder. You can make use of the mat-input-element
class in the matInput
element to do this.
Ideally, I would also suggest you avoid using inline styles and use classes instead. It makes your code more readable as well.
HTML
<form #searchForm="ngForm" class="example-full-width mr-auto">
<mat-form-field class="employee-search-field">
<mat-label>Search for an Employee</mat-label>
<input matInput [(ngModel)]="userIdInput" name="userIdInput" placeholder="Enter at least 2 characters of a name or ID"/>
</mat-form-field>
</form>
In your css, add the below code.
.employee-search-field {
width: 350px;
font-size: 14px;
margin-bottom: -15px;
}
.employee-search-field mat-label {
color: white;
/* add label text color here */
}
.employee-search-field .mat-input-element {
color: white;
/* add input text color here */
}
.employee-search-field .mat-input-element::placeholder {
color: white;
/* add placeholder css here */
}
Changing Placeholder Text Color with Swift
You can set the placeholder text using an attributed string. Just pass the color you want to the attributes
parameter.
Swift 5:
let myTextField = UITextField(frame: CGRect(x: 0, y: 0, width: 200, height: 30))
myTextField.backgroundColor = .blue
myTextField.attributedPlaceholder = NSAttributedString(
string: "Placeholder Text",
attributes: [NSAttributedString.Key.foregroundColor: UIColor.white]
)
Swift 3:
myTextField.attributedPlaceholder = NSAttributedString(
string: "Placeholder Text",
attributes: [NSAttributedStringKey.foregroundColor: UIColor.white]
)
Older Swift:
myTextField.attributedPlaceholder = NSAttributedString(
string: "Placeholder Text",
attributes: [NSForegroundColorAttributeName: UIColor.white]
)
Related Topics
How to Get The Cursor to Change to The Hand When Hovering a <Button> Tag
How to Set The Width of Webkit-Scrollbar-Thumb
Why Clear: Right Doesn't Work as Intended
CSS: Inline Element Stretch to Fill Available Horizontal Space of Container
One CSS Declaration for All CSS Font Properties
Svg Data Image as CSS Background
Issue Making Bootstrap3 Icon Spin
Creating a Foundation-Style Block Grid in Bootstrap 3
Remove or Add Class in Angular
CSS3 Flexbox Full-Height App and Overflow
Defining Keyframe Animations Inside Media Queries
PHP/HTML/CSS - If Firefox, If Chrome, If Safari
Reverse Svg Line Drawing Animation
Generate Random Color with Pure CSS (No JavaScript)
How to Create 3X3 Grid Menu in React Native Without 3Rd Party Lib