html - Why is css "font-family:inherit" affecting color of <select> in Chrome? (with example) -

i wondering why <select> element different color on few web pages. noticed on pages if there font-family:inherit css property affecting select element, 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 working example

i understand frontend development, , know normalize/reset. wondering why font-family:inherit affecting color of <select>

does know why so? default value (i.e. inherit) value font-family?

screenshot showing js fiddle result on mac

edit:

tony posted screenshot in comments, font-family: system-ui; affecting , feel of <select>.

edit 2:

apparently trend in web design leave decision on font family device - called native fonts. therefore forms respecting directive , end rendered native ui elements.

it different depending on browser using. each browser has own default settings.

you can find list of default styles across browsers here. when inspecting elements on chrome can see default styles labeled user agent stylesheet. example of seen below:

many people use css reset file standardize these settings across browsers. eric meyer's reset popular option achieve this.