Jump to content
newcoder1010

How to style placeholder

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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...