Different colors in placeholder
The appearance of the placeholder property of <input> elements is managed by the browser and it cannot be separated into two separate elements, which styling just the asterisk would require, nor can it be easily styled as such.
If you wanted to accomplish this, you would likely need to use something to explicitly override the element with a <div> that contained your <span>Name</span><span style='color:red'>*</span> content to overlay on your <input> element itself similar to the scenario mentioned in this related discussion :
.input-placeholder {
position: relative;
}
.input-placeholder input {
padding: 2px;
}
.input-placeholder input:valid + .placeholder {
display: none;
}
.placeholder {
position: absolute;
pointer-events: none;
top: 2px;
bottom: 2px;
left: 6px;
margin: auto;
color: #ccc;
}
.placeholder span {
color: red;
} <div class="input-placeholder">
<input type="text" required>
<div class="placeholder">
Name<span>*</span>
</div>
</div>How to have multiple placeholders with different colors in HTML?
You need to use css:
In order to style a placeholder you need to write ::placeholder in the css line.
Because you need 2 different colors, give the input tag an id.
Then make the css using the id like this: #, then the id, and then the ::placeholder.
like this:
<input id="greyph" placeholder="...">
<input id="whiteph" placeholder="...">
<!-- ph = PlaceHolder -->
the css will be:
#greyph::placeholder {color: grey;}
#whiteph::placeholder {color: white;}
note that you don't have to color a placeholder to grey because this is the default
How to add different placeholder color
you need to be more specified:
if you put ::-webkit-input-placeholder in the CSS, you will select all placeholders... but this is not what we want
so using :nth-of-type(); a pseudo-class, you can select the wanted one, easily.
useful documentations:
nth-of-typeMDN documentation
so the code will be like this:
/* 1 */
input:nth-of-type(1)::-webkit-input-placeholder {
color: green;
}
/* 2 */
input:nth-of-type(2)::-webkit-input-placeholder {
color: blue;
}
/* 3 */
input:nth-of-type(3)::-webkit-input-placeholder {
color: red;
}<!-- 1 -->
<input type="text" name="" id="" placeholder="hello world">
<!-- 2 -->
<input type="text" name="" id="" placeholder="hello world">
<!-- 3 -->
<input type="text" name="" id="" placeholder="hello world">2 colors in one placeholder of input field
Here is a cross-browser solution that does not use Javascript:
Live demo
Inline elements such input do not support :before and :after. To make things even harder the placeholder selector and their pseudo-classes are not fully supported by all browsers, as you found out.
So, the workaround is to add a label placed relatively on top of the input box with a for attribute pointing to the input text box. This way, when user clicks the label (fake placeholder) the focus goes into the input box underneath.
Replace your class="required" by the attribute required="required". This gives you an opportunity to use the :invalid and :valid selectors, and also lets the browser display a validation error, when the form is submitted with empty required fields.
input {
width: 160px;
}
input[type=submit] {
width: auto;
}
input[required]+label {
color: #999;
font-family: Arial;
font-size: .8em;
position: relative;
left: -166px;
/* the negative of the input width */
}
input[required]+label:after {
content: '*';
color: red;
}
/* show the placeholder when input has no content (no content = invalid) */
input[required]:invalid+label {
display: inline-block;
}
/* hide the placeholder when input has some text typed in */
input[required]:valid+label {
display: none;
}<form>
<input type="text" id="name" name="name" required="required" />
<label for="name">Name</label>
<br/>
<input type="email" id="email" name="email" placeholder="Email" />
<br/>
<input type="submit" />
</form>Is it possible multiple text color in a single placeholder?
No, it is not possible to color the default placeholder but you can create a element similar to placeholder. So, that you can color the letters. This is a workaround to the default placeholder.
Note that I am using opacity: 0.5, you can change it as per your need.
HTML
.input-field {
position: relative;
display: inline-block;
}
.input-field > label {
position: absolute;
left: 0.5em;
top: 50%;
margin-top: -0.5em;
opacity: 0.5;
}
.input-field > input[type=text]:focus + label {
display: none;
}
.input-field > label > span {
letter-spacing: -2px;
}
.first-letter {
color: red;
}
.second-letter {
color: blue;
}
.third-letter {
color: orange;
}
.fourth-letter {
color: green;
}
.fifth-letter {
color: yellow;
} <div class="input-field">
<input id="input-text-field" type="text"></input>
<label for="input-text-field">
<span class="first-letter">H</span>
<span class="second-letter">E</span>
<span class="third-letter">L</span>
<span class="fourth-letter">L</span>
<span class="fifth-letter">O</span>
</label>
</div>how to change the placeholder text color in two different areas (div)in a web page
try this code
.fname::-webkit-input-placeholder {
color: red
}<div class="content">
<input type="text" name="firstname" class="fname" placeholder="placeholder">
</div>
<input type="text" name="lastname" class="lname" placeholder="placeholder">Changing the color of placeholder text of a select element
You can use ::placeholder pseudo in CSS, like this example:
::placeholder { color: #fff; }
If you want a cross-browser solution, you can use prefixes:
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #fff;
}
::-moz-placeholder { /* Firefox 19+ */
color: #fff;
}
:-ms-input-placeholder { /* IE 10+ */
color: #fff;
}
:-moz-placeholder { /* Firefox 18- */
color: #fff;
}
The ::placeholder selector only selects the placeholder text inside your input, besides that, you can style the input itself when it is showing the placeholder using :placeholder-show.
Also, be aware that Firefox might show placeholder text lighter than it is supposed to display. to fix the issue you can use:
::-moz-placeholder {
opacity: 1;
}
Related Topics
Set Margin/Padding for Each Page to Print (Html/Css)
Why Won't Tabindex Work with Firefox
Stray Vertical Line Above 965 Pixels with Border Radius in Safari
Fill Svg Element with With a Background-Image with an Offset
HTML and CSS: Using Background Image as a Clickable Link
Remove Value Attribute of Input Element Using CSS Only
Setting Overflow: Scroll on a Table with Display: Flex
<Br> Not Causing New Line on Chrome
How to Make Sure That My Footer Shows All the Way at End of the Page Rather Than in the Middle
How to Append Leading Zero's to an Ordered Number List? (01 or 001 as Opposed to Just 1)
Using 100Vw and Vh Creates Extra Space Beyond Viewport Size. How to Get Rid of It
Scope External CSS File for Div(No CSS File Should Link Only )
Get Input Type=Text to Look Like Type=Password
How to Disable All Action Buttons While Shiny Is Busy and Loading Text Is Displayed