How to change color of placeholder in input

HTML & CSS
1

hi friends
i want to change the color of placeholder in contact us page.

http://procitywide.com/contact/

i want to change color in white.

Here is attachment of screenshot for more understanding

920×449 27 KB

thanks waiting

2

It looks like it’s possible with the text, not so sure about the background, if that’s what you require.

3

i have seen this, but can you give me code , what should i add on style sheet
thanks

4

Have you tried implementing it yourself? The aim of the forum is to help people understand how to do work for themselves, not to supply code on demand for people. Show us what you’ve done so far and explain where you’re having difficulties, then we can assist.

Here’s a more recent article that goes into more detail on the subject - https://css-tricks.com/almanac/selectors/p/placeholder/

2 Likes
5

sir i have tried myself, i unable to identify the class of it. i have changed the color of input texts, but only unable to do placeholder text. i already have seen this article. i coded on same way. unbable to do
thanks

6

Just be careful when you use it in some situations, otherwise Edge users won’t know what to type :slight_smile:

7

You’ve got several classes applied to the input elements; for example, on the email input, you’ve got:

wpcf7-form-control
wpcf7-text
wpcf7-email 
wpcf7-validates-as-required
wpcf7-validates-as-email

I don’t know the framework used, but my guess would be you could try applying the CSS to that 2nd class down wpcf7-text

8

Try this:

  1. open the page in FireFox
  2. right-click on “Your name here” (a debug window should open)
  3. select “Inspect element (Q)” and notice the highlighted text:
<input name="your-name" value="" 
size="40" 
class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" 
placeholder="Your name here" 
type="text"
>
  1. find “wpcf7-form-control.wpcf7-text” in the right-hand window
  2. un-checkbox “background: #fdc502 none repeat scroll 0 0;”
    the background color of the form inout text should change
  3. find relevant CSS style-sheet and make your changes
9

You should not rely on placeholders to guide users as to what the input fields are. You should be using label tags as well for browsers that don’t support placeholders, for users of screenreaders and people who use auto-complete.

2 Likes
10

In main-style.css you are setting the color to #cc with !important so you will need the same weight to over-ride.

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #666 !important;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #666 !important;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #666 !important;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #666 !important;
}

e.g.

 input:-moz-placeholder,
    textarea:-moz-placeholder {
      color: #fff !important;
    }
    input::-moz-placeholder,
    textarea::-moz-placeholder {
      color: #fff !important;
    }
    input:-ms-input-placeholder,
    textarea:-ms-input-placeholder {
      color: #fff !important;
    }
    input::-webkit-input-placeholder,
    textarea::-webkit-input-placeholder {
      color: #fff !important;
    }

Remember as others have said the placeholder is not a substitute for a label and the placeholder is merely an extra hint.

In browsers with autofill labels are imperative and also for screen readers and indeed general navigation. If you do not have labels then how does the user know when he reviews the form if the data they have entered matches what is required?

6 Likes
11

thanks great help

1 Like
12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.