为什么CSS“字体家族：继承”会影响字体的颜色 <select>在Chrome中？ （带有示例）

Question

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 (ie 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.

Answer 1

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.

Answer 2

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/