Can someone explain why the color of a <select> element in Chrome is being influenced by the CSS property "font-family: inherit"? Here is an example

I've always been curious as to why the <select> element appears in different colors on various web pages. I've noticed that when the font-family:inherit css property affects the select element, it ends up looking 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>

Check out this JsFiddle for a working example.

Even though I have experience in frontend development and I'm familiar with normalize/reset techniques, I'm still puzzled by why setting font-family:inherit affects the color of a <select>.

Can anyone shed some light on this? What exactly is the default value of font-family (i.e. inherit) supposed to do?

Take a look at this screenshot showing the result from the js fiddle on a Mac.

EDIT:

Tony shared a screenshot in the comments, pointing out that font-family: system-ui; also impacts the appearance of the <select> element.

EDIT 2:

It seems that using the trend in web design to let the device decide on the font family - known as native fonts - causes forms to adhere to this directive, resulting in them being rendered as native UI elements.

htmlcsswebfrontend

Answer №1

The default styles of a website may vary depending on the browser you are using, as each browser has its own unique settings.

If you want to see a comprehensive list of default styles for different browsers, you can visit this link. In Google Chrome, when inspecting elements, you can identify default styles labeled as user agent stylesheet, such as the example shown below:

https://i.stack.imgur.com/Zwbza.png

To ensure consistency in styling across various browsers, many web developers use a CSS reset file. One popular option for achieving this standardization is Eric Meyer's reset.

Answer №2

It's quite baffling how the font-family property behaves inconsistently on form elements when it comes to styling them across different web browsers. The cause behind this inconsistency, whether it's related to rendering or security, remains unknown. Interestingly, in the case of Chrome, it appears that the system-ui font is responsible for these discrepancies.

https://jsfiddle.net/19x3rapk/6/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Put a watch on a variable as soon as it is set

When initializing a variable, I want to use the $watch function in Angular without it automatically initializing right away. Is there a way to accomplish this? $watch $scope.$watch(function () { return $scope.character.level; }, function (ne ...

javascripthtmlangularjs

Using JavaScript, retrieve the ID of a child element by utilizing details about the parent element

I have implemented a JavaScript function that creates a div element. Within this div, there are multiple checkboxes as child elements. My goal is to use a loop to extract the ids of all these checkboxes. The div has been assigned to a variable named: o ...

javascripthtmlparent-child

Is it possible to have a <small> element nested within an HTML5 heading such as h1, h2, h3, etc?

I am curious about the proper way to structure headings in HTML5. Can I include a <small> element within an <h3> tag? For example: <h3>Payment details <small>(this is your default card)</small></h3> ...

htmlw3c

Responsive breakpoints in TailwindCSS seem to have an issue with applying padding and margin styles properly

Currently, I am tackling a project that involves creating a responsive design with Tailwind CSS on nuxtjs. Has anyone encountered the issue of py-8 applying to both breakpoints? If so, please share your insights! Here is how I have structured the compone ...

cssvue.jsnuxt.jstailwind-css

Is it possible to continuously generate webpages using AJAX?

Is there a way to achieve an infinite scrolling effect in all directions using ajax requests without the need for flash or silverlight? If anyone has an example of this, I would love to see it! Thank you for your time. ...

javascriptjqueryhtmlcss

Attach an event listener to a particular textarea element

Currently, I am developing a project in Next.js13 and my focus is on creating a custom textarea component. The goal is to have this component add an event listener to itself for auto-adjusting its height as the user types. Below is the relevant section of ...

htmltypescriptnext.js

Differences in SVG rendering between Chrome and Firefox

I am eager to create a diagram on my website using SVG. To ensure the diagram is displayed in full screen, I am utilizing availHeight and availWidth to determine the client screen's height and width, then adjust the scaling accordingly. My current sc ...

javascripthtmlcssgoogle-chromesvg

After attempting to retrieve local .HTML content with JQuery ajax for the second time, the JavaScript code within index.html appears to be malfunctioning

My apologies for my limited proficiency in English... Currently, I am engaged in phonegap development where I am attempting to utilize JQuery ajax to retrieve local .HTML content and insert this extracted content into the div with the id="next-page" in in ...

jqueryhtmlajaxcordova

Leveraging jQuery Ajax and MySQL to generate dynamic HTML content

I'm in the process of creating a unique photo gallery that utilizes dynamic features. Instead of relying on constant HTML/PHP refreshing for updates, I am incorporating jQuery to handle dynamic MYSQL queries. As a beginner, I've managed to creat ...

javascriptphpjqueryhtmlmysql

Implementing Enter key functionality to add items to a Todo list using pure DOM manipulation

var listLis=document.getElementById('list'); const addbutton=document.querySelector('.fa-plus') const inputBar=document.querySelector('.show') function showInput(e){ inputBar.classList.toggle('show') } addbutt ...

javascripthtmlcss

Retrieving a boolean value (from a JSON file) to display as a checkbox using a script

Currently, I am utilizing a script to fetch data from a Google Sheet $.getJSON("https://spreadsheets.google.com/feeds/list/1nPL4wFITrwgz2_alxLnO9VBhJQ7QHuif9nFXurgdSUk/1/public/values?alt=json", function(data) { var sheetData = data.feed.entry; va ...

javascriptjqueryhtml

What methods can be used to choose specific rows while styling columns with CSS?

As an exercise in CSS styling, I have successfully transformed an unordered list into columns. But now, I am curious if it is possible to target and style the "rows" within these columns. This is the CSS code currently in use: ul.popular{ margin:15px ...

css

Is it possible for me to generate HTML using JavaScript?

Below is the javascript code I have written, saved as create.js: var stuff = document.querySelector(".stuff"); var item = document.createElement('div'); item.className = 'item'; stuff.appendChild(item); This is the corresponding HT ...

javascripthtmlcssdom

Tips for achieving consistent outcomes on both IE and Chrome when utilizing the `min` attribute in HTML input tags

The display of input fields is inconsistent between IE (version 11) and Chrome (version 46.0.2490.71) when using the min option in the HTML input tag. In Chrome, the input fields appear extra long, while in IE they display correctly (same as when min is no ...

htmlcss

Pass data back and forth between app.js (node) and javascript (main.js)

I am facing a challenge in sending and retrieving data (username) between app.js and main.js. In my setup, I have a node app.js that calls index.html which then triggers the main.js function called "clicked". Below is the code snippets for each file: app. ...

javascripthtmlnode.js

Looping through items using ng-repeat according to the chosen option in a select dropdown

After expanding my project, I encountered an issue with the main object structure: { screens: [{ id: 0, name: 'Screen0', sections: [{ id: 0, sectionItems: [] }, { id: 1, sectionItems: [] }, { i ...

javascripthtmlangularjsangularjs-ng-repeat

JavaScript not redirecting to HTML page as expected

I have developed a basic login page that makes an Ajax request to the backend. However, I am experiencing difficulties with redirecting the page upon successful login. The redirect function only seems to work 1 in 15 times, and I'm unsure of the reaso ...

javascripthtmlajax

Incorporating Content-Disposition headers to enable the file to be both downloaded and opened

I'm having trouble allowing users to both view and download files on a web page. I've tried setting headers and using JavaScript, but can't seem to get it right. My goal is to have an HTML page with two links for each file - one to open in ...

javascripthtmlhttp-headerscontent-disposition

Can AJAX be used when submitting an HTML form with a select input field?

I have been working on an Ajax search suggest input and have successfully implemented it. However, I would like to tweak the script so that when a suggestion is selected, the form auto-submits. Below is my JavaScript code: <script> function suggest ...

phpjqueryhtmlajaxforms

"Keep a new tab open at all times, even when submitting a form in

I have a form with two submit buttons - one to open the page in a new tab (preview) and another for regular form submission (publish). The issues I am facing are: When I click the preview button to open in a new tab, if I then click the publish button a ...

javascriptjqueryhtmlformscodeigniter