CODEWITHSUNDEEP
htmlcssformsstylesheetplaceholder
lgjmac
lgjmac

Reputation: 133

different placeholder text styles in the same form

Does anyone know if it is possible to have different styles for the placeholder text in the same form?

So far I have

::-webkit-input-placeholder {
   color:#000 !important;
}

:-moz-placeholder { /* Firefox 18- */
   color:#000 !important;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color:#000 !important;  
}

:-ms-input-placeholder {  
   color:#000 !important;  
}

which works great for making the text black; however I also want to have blue text in a different

Upvotes: 0

Views: 282

Answers (2)

Jatin
Jatin

Reputation: 3089

Here you Go:

Working Example

CSS:

    ::-webkit-input-placeholder { color:#f00; }
    input:-moz-placeholder { color:#f00; }

    input:-ms-placeholder { color:#f00; }
    ::-ms-input-placeholder { color:#f00; }
    :-ms-input-placeholder  { color:#f00; }

    /* individual */
    #field2::-webkit-input-placeholder { color:#00f; }
    #field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
    #field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

Mark up:

<p><input type="search" placeholder="Field 1" id="field1" /></p>
<p><input type="search" placeholder="Field 2" id="field2" /></p>
<p><input type="search" placeholder="Field 3" id="field3" /></p>
<p><input type="search" placeholder="Field 4" id="field4" /></p>

Upvotes: 1

Josh Rutherford
Josh Rutherford

Reputation: 2723

If you have different classes on your inputs or different input types, you can do something like this: 

input[type='text']::-webkit-input-placeholder {
    color: #000;
}

input[type='email']::-webkit-input-placeholder {
    color: red;
}

Upvotes: 0

Related Questions