Chris Kepinski February 2016

Setting input's placeholder color in footer element is not working

everyone!

[edit]

Take a look at the fiddle I created, it looks like inside footer element placeholder styling is not working. Any idea how to overcome this?

I tried to use:

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color:    #3d3d3d!important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #3d3d3d!important;
   opacity:  1!important;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #3d3d3d!important;
   opacity:  1!important;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #3d3d3d!important;
}
:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
  color:    #3d3d3d!important;
}

as well as:

footer::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color:    #3d3d3d!important;
}

and it didn't help.

Keep in mind I want a separate color for placeholder text and for input text typed by the user.

Any idea where to start?

Answers


Rounin February 2016

It may not make a difference, but try moving the comments so that they fall outside the style declarations.

Also, don't forget to include:

::-ms-input-placeholder {color: #3d3d3d;}  /* Edge */

Full styles:

::-webkit-input-placeholder {color: #3d3d3d;} /* WebKit, Blink and Opera */

:-moz-placeholder {color: #3d3d3d; opacity: 1;} /* Mozilla Firefox 4 to 18 */

::-moz-placeholder {color: #3d3d3d; opacity: 1;} /* Mozilla Firefox 19+ */

:-ms-input-placeholder {color: #3d3d3d;} /* Internet Explorer 10-11 */

::-ms-input-placeholder {color: #3d3d3d;}  /* Edge */

:placeholder-shown {color: #3d3d3d;} /* CSS Level 4 Selector */


anand kulkarni February 2016

#coupon_code::-moz-placeholder {
color: #d3d3d3!important;
opacity: 1!important;
}

i have change above css line in your fiddle, hope this will help you.


Chris Kepinski February 2016

OK, it was really stupid one. There was a javascript added to input element:

<input type="text" name="woochimp_widget_subscription[email]" id="woochimp_widget_subscription_email" class="woochimp_widget_field" required="" value="Enter your email..." onfocus="this.value='';" onblur="if(this.value=='')this.value='Enter your email...';" />

after removing the js code and adding placeholderattribute:

<input type="text" name="woochimp_widget_subscription[email]" id="woochimp_widget_subscription_email" class="woochimp_widget_field" required="" value="Enter your email..." placeholder="Enter you email..." />

it started to work just nice.

Thank you All for your help!

Post Status

Asked in February 2016
Viewed 2,586 times
Voted 5
Answered 3 times

Search




Leave an answer