0

The context is I need to use select elements built from a framework that I would prefer not to change (respectively jqxComboBox and jqxDropDownList from jQWidgets), and use their built-in placeholders.

jqxComboBox creates an inner input for that with the attribute placeholder="my text", so it gets styled correctly in browser-dependant placeholders gray.

However jqxDropDownList creates an inner span with the attribute unselectable="on" that by default appears in the page's font color.

I'd like to style the jqxDropDownList accordingly, but the gray changes following the browser. Is there a consistent way to obtain the placeholder color that uses the browser, without having to declare a different rule for every one?

example: this gray is nice for Firefox, but not on Chrome (the difference might seem small here, but it is accentuated with our CSS).

body {
    font-weight: bold;
}

input { /*just for the example*/
    width: 100%;
}
input::placeholder { /*just for the example*/
    font-weight: bold !important;
}

span[unselectable="on"] {
    color: #777777 !important;
}
<input style=type="textarea" placeholder="native browser placeholder color"><br>
<span unselectable="on">testing placeholder color emulation</span><br>
<span>what I have currently in my jqxDropDownList</span>

EDIT: partially solved my problem by overriding placeholders color for all browsers following this post's accepted answer, but still interested for the sake of pure knowledge..

Kaddath
  • 5,933
  • 1
  • 9
  • 23

1 Answers1

0

Try using color: unset to use the default color for given element.

Mario Cianciolo
  • 1,223
  • 10
  • 17
  • Thanks for your answer, but actually it's the contrary: I'd like a regular span to take the color of the placeholders, if I use `unset` it will do what I already have: a black span – Kaddath Mar 06 '19 at 12:21