Why is css "font-family:inherit" affecting color of in Chrome? (with example) Asked Apr 05 '17 at 21:19 Active Apr 06 '17 at 07:07 Viewed 521 times 0 I was wondering why is <select> element different color on few web pages. I noticed that on some pages if there is font-family:inherit css property affecting the select element, it would look different - blue! <!-- BLACK --> <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> <!-- BLUE --> <select style="font-family: inherit;"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> JsFiddle with working example I understand frontend development, and I know about normalize/reset. I am wondering why is font-family:inherit affecting color of a <select> Does anyone know why is it so? What is the default value (i.e. inherit) value for the font-family? Screenshot showing js fiddle result on mac EDIT: Tony posted a screenshot in comments, font-family: system-ui; is affecting look and feel of <select>. EDIT 2: Apparently it is a trend in web design to leave decision on font family to the device - so called native fonts. Therefore forms are also respecting directive and end up rendered as native UI elements. html css web frontend edited Apr 06 '17 at 07:07 Zoran Antolović asked Apr 05 '17 at 21:19 Zoran Antolović 11 5 you have to actually set the `font-family` to a specific font , then also upload that font to ensure that it always looks the same reguardless of device or browser – Scott Selby Apr 05 '17 at 21:23 You might find this useful: http://stackoverflow.com/questions/11578819/css-reset-what-exactly-does-it-do – scrappedcola Apr 05 '17 at 21:23 Please provide all relevant code in an [mcve] in the question itself, not only on a third-party site. – Heretic Monkey Apr 05 '17 at 21:28 3 How does it affect color for you? ... it doesn't for me, only the font type is affected – Asons Apr 05 '17 at 21:34 It does not affect color. There must be another rule or property that sets the color. – Gabriele Petrioli Apr 05 '17 at 21:39 1 @GabyakaG.Petrioli check out the fiddle please. Are selects different in chrome? – Zoran Antolović Apr 05 '17 at 21:45 Selects are the same in Chrome on Windows for me. you might wanna specify OS – rlemon Apr 05 '17 at 21:56 1 @ZoranAntolović in windows 7 they are the same color in Firefox / Chrome / IE / Safari / Opera – Gabriele Petrioli Apr 05 '17 at 22:05 I've added a screenshot, it's a Mac OS Sierra 10.12.3 – Zoran Antolović Apr 06 '17 at 05:00 `font-family: system-ui;` is the culprit :) thanks @Tony – Zoran Antolović Apr 06 '17 at 05:08 The screenshot shows the up and down arrows as different from the default. You should state this in the question itself and also mention there what OS and browser combination(s) the issue relates to. Also please make sure that the code included in the question is as such sufficient to produce the effect. – Jukka K. Korpela Apr 07 '17 at 06:22 2 Answers2 0 It is different depending on the browser you are using. Each browser has their own default settings. You can find a list of default styles across all browsers here. When inspecting elements on chrome you can see default styles labeled as user agent stylesheet. An example of this is seen below: Many people use a CSS reset file to standardize these settings across browsers. The Eric Meyer's reset is a popular option to achieve this. edited Apr 05 '17 at 21:58 Tony answered Apr 05 '17 at 21:22 Tony 2,890 1 24 35 I do understand that. I'm asking what is actual value of `inherit` for `font-family` on different browsers? Or how to check it? In inspector I can-t see other than `inherit` – Zoran Antolović Apr 05 '17 at 21:25 @ZoranAntolović On the chrome inspector default css styles will be labeled as `user agent stylesheet`. – Tony Apr 05 '17 at 21:32 @ZoranAntolović if you are still having trouble tracking it down, it's possible that the `font-family` style is being inherited from one of your parent tags. The `inherit` setting will use the style of a parent tag, so it is probably not dependent on a `` tags style. – Tony Apr 05 '17 at 21:48

Answer 1

For whatever reason, the font-family property on form elements cannot be 100% predictably styled across all browsers. I'm not sure if it's a rendering or security reason but in the case of Chrome, the system-ui font seems to be the culprit here.

https://jsfiddle.net/8nr6h74o/3/