Jump to content

How to style placeholder


newcoder1010

Recommended Posts

Hello,

 

HTML:

<div class="form-item js-form-item form-type-textfield js-form-type-textfield form-item-property-address js-form-item-property-address form-no-label form-group">
      <label for="edit-property-address" class="control-label sr-only js-form-required form-required">Property Address</label>
  
  
  <input data-drupal-selector="edit-property-address" class="form-text required form-control" type="text" id="edit-property-address" name="property_address" value="" size="60" maxlength="255" placeholder="Property Address" required="required" aria-required="true">

  
  
  </div>

CSS:


::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: red;
}
::-moz-placeholder { /* Firefox 19+ */
  color: red;
}
:-ms-input-placeholder { /* IE 10+ */
  color: red;
}
:-moz-placeholder { /* Firefox 18- */
  color: red;
}

::placeholder {
  color: red;
}

Font color is not changing to red. When I inspect in chrome, I could not see the source of the styling. Currently, I see placeholder color is dark. Please advise.

Link to comment
Share on other sites

IF only it was that simple, chrome has added so many unnecessary properties now for just a simple thing its ridiculous, its something like ::-webkit-text-fill;  with something like ::-webkit-when-planets-are-aligned or ::-webkit-fish-swim-in-square-formation, before it would take effect.( yes! last two made up! Or were they? It's that bad now)

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...