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

Eliminate the gaps within CSS3 columns

I'm attempting to achieve an effect that looks like: C---------------------------------------) | Address 1 | Phone Numbers | | Address 2 | Times place is open | (---------------------------------------) However, the spacing with th ...

htmlcss

The visibility of a CSS class is rendered non-apparent when formed through the implementation

function retrieve_files(){ $.ajax({ type: "GET", url: "retrieve_files.php", cache: false, success: function(result){ $("#insideT").html(result); } }); } retrieve_files.php $dir = 'upload ...

jquerycssajax

Tips on narrowing the left margin of a div when the size of the contained element becomes too large

I am facing a challenge in formatting text on the web that contains equations embedded as SVG images. To address this issue, I have replaced the SVG elements with fixed-sized div in the example provided below. The SVG element is nested within a div specifi ...

htmlcss

The Javascript calculation function fails to execute proper calculations

I have been facing immense frustration while working on a project lately. The project involves creating a unique Webpage that can calculate the total cost for users based on their selections of radio buttons and check boxes. Assuming that all other functi ...

javascripthtmlfunction

Is it possible to alter the color of the text "midway" within a character on a website?

In some desktop applications, I've noticed a cool feature where the color of text changes as the background evolves. This allows for multiple colors on a single character, which is especially useful when displaying progress bars with percentages insid ...

htmlcsscolorsprogress-bar

What is the process for configuring my form to automatically send to my email upon clicking the send button?

I found this code snippet on a website and I'm trying to figure out how to make the 'Send!' button redirect users to my email address with their message, name, and email included. Can anyone help me solve this issue? I attempted to add my e ...

javascripthtmlcss

Troubleshooting EasyTabs: Localhost Issue with Ajax Tab Configurations

I've implemented EasyTabs for organizing my tabs on a webpage. I decided to use ajax-tabs functionality in order to fetch content from other pages when users click on the navigation menu buttons. However, I've encountered an issue where the conte ...

javascriptjquerycssajaxtabs

Designing a unique CSS border for custom list item bullets

I'm currently exploring the possibility of implementing a CSS border around an image that I have imported as a custom bullet for my list items: ul { list-style: none; margin-right: 0; padding-left: 0; list-style-position: inside; } ul > ...

htmlcsshtml-listsborder

Differentiate input elements with custom styling

I'm experiencing an issue while trying to style a specific form field in Angular 7. The style doesn't seem to be applying properly. Below is my form structure: <ul> <li> <mat-form-field *ngIf="number"> <input ma ...

javascripthtmlcssangular

Positioning Elements Absolutely in Relation to List Items

I am looking to style a list item by adding background-color, border, and other properties. Below is the CSS and HTML I have tried so far. Additionally, I want to use the div element to position more absolute elements in relation to the li > div. ul { ...

css

Issue with the MUI Autocomplete display in my form

Recently, I started using Material UI and Tailwind CSS for my project. However, I encountered an issue with the Autocomplete component where the input overlaps with the following DatePicker when there is multiple data in the Autocomplete. I have attached a ...

csstypescriptnext.jsmaterial-uitailwind-css

Getting the value of a lookup in an alert or console within a Material table in React

I am currently integrating a material table into my project and I have encountered an issue. Instead of getting the name of a city, I am receiving numbers like 63 or 32 in alerts or console logs. For reference, here is the link to the CodeSandbox: https:/ ...

javascriptreactjsecmascript-6material-uifrontend

Implementing a JavaScript function that directs to the current page

I have set up my index page with a link that looks like this: <li onClick="CreateUser()"> <a href="#CreateUser">CreateUser</a> </li> When the "Create User" list item is clicked, the main page content is populated as follows: fun ...

javascripthtmlcss

Webkit browsers do not properly clip content with rounded corners when using position:relative

In webkit browsers like Chrome, rounded corners do not properly cut off content when using position:relative; Check out this demonstration. Here is the HTML: <div class="outer"> <div class="inner"> </div> <div> And here ...

htmlcsswebkitrounded-corners

Encountering XMLHttpRequest errors when trying to make an AJAX POST request

I'm encountering an issue with a modal containing a form for submitting emails. Despite setting up the ajax post as usual, the submission is failing consistently. The console displays the following two errors: Setting XMLHttpRequest.withCredent ...

javascriptjqueryhtmlajaxasp.net-mvc-5

Create a basic chart using JavaScript

I am looking to replicate a specific chart using JavaScript. The red point in the chart is variable. So far, I have attempted to create it using the flot library: var d3 = [[7,7]]; $.plot("#placeholder", [{ data: d3, points: { show: true } }], { ...

javascripthtmlplotchartsdraw

A row divided into three segments in Twitter Bootstrap2, with the second segment spanning the rest

Looking to divide a row into three segments under the following conditions: The first segment should have a maximum height and always stay at the top (minimum height of 0; maximum height of 40%). If the content exceeds the max-height, a scroll bar sho ...

htmlcsstwitter-bootstrap

Difficulties arise when retrieving the value of a radio input in PHP using the model-view-controller framework

My attempt to retrieve the value of a group of radio inputs in a form is not successful. VIEW: <form class="form-horizontal" method="post" action="Index.php?opt=filter"> stuff... . . . <div class="form-group"> <label class="col-md-4 ...

phphtmlforms

Is there a more efficient approach to applying a basic function to multiple elements within a DIV and having it activate only upon a click event using jQuery?

This solution works, but I am looking for a more professional approach in order to adhere to the principle of "don't repeat yourself." $("document").ready(function(){ $(".child").each(function(index){ $(this).click(func ...

htmljquerycsscss-selectors

How can you ensure that text inside a tag is styled as italic using font-style: italic and the !important keyword in HTML and CSS?

I've created an HTML site using chordpro.php generator, and the specific aspect related to this query is as follows: <div class="song"> <table border=0 cellpadding=0 cellspacing=0 class="songline"> <tr class="songlyricchord"><td& ...

htmlcss