What steps can I take to stop Firefox from automatically adding vertical scrollbars to a select dropdown when I change the background color?

Having an issue with changing the background color of a select dropdown. It works fine in Chrome and Safari, but when I try to change the background color in Firefox to anything other than #FFFFFF, the appearance of the dropdown changes drastically. It seems like Firefox stops using the default macOS UI for the dropdown: the rounded corners disappear, scrollbars show up, and the font size and spacing look different.

I've experimented with using -moz-appearance: none; and targeting the option elements, but haven't been able to fix the problem.

Here's what the select dropdown looks like with a #FFFFFF background in Firefox: https://i.sstatic.net/0jPHH.png

And here's how it looks with any other color background in Firefox: https://i.sstatic.net/KwTrf.png

The background color dropdown behaves correctly in Chrome and Safari: https://i.sstatic.net/aEJac.png

You can check out a Codepen comparing the different results here: https://codepen.io/ian-pvd/pen/XxdKJB

(Make sure to view it in Firefox and compare the results with other browsers.)

Is there a specific style or workaround that can prevent this issue or force the select dropdown to use the system UI?

Browsers: Firefox 62.0.2 Chrome 69.0.3497.100 Safari 11.0.3 Operating System: macOS 10.13.3

htmlcssfirefoxforms

Answer №1

Is there a workaround to avoid this issue, or can we make the select dropdown menu use the default system UI?

A potential solution could be using jquery-nice-select

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

How to navigate to the "not now" button in Instagram notifications with Selenium and Python

I'm currently working on a custom "Instagram bot" to log in to Instagram. Although I've managed to bypass the login screen, I'm encountering an issue with a popup message that says: https://i.stack.imgur.com/OMA6h.png from selenium import we ...

pythonhtmlseleniumbotsweb-deployment

The issue with hiding elements using .setAttribute in HTML/CSS is not occurring as expected

function showEditStudentProfile() { document.getElementById('editstudentprofile').setAttribute('class', 'unhide'); document.getElementById('profile_viewStudent').setAttribute('class', ' ...

htmlcss

HTML border width is set to 100%, but there seems to be an issue with the responsive menu border and icon display

One issue I'm encountering with my website involves the border at the bottom of my navigation bar. Despite trying to adjust the box-sizing property to border-box, I still can't get it to display correctly. My goal is to have the border span 100% ...

cssmenuresponsive-design

Aligning elements next to each other in html / css without using any top margins

How can I arrange four blocks of text side-by-side, center them over a background image, and ensure they respond well on different screen sizes without using tables? I typically use tables for this layout, but I've heard that CSS/HTML5 can achieve th ...

csshtml

Fascinating CSS rendering glitch observed on zooming in: all browsers create a noticeable gap between containers except for Firefox

I'm experiencing a rather intriguing and peculiar issue with css styles when zooming in and out on the browser. Specifically, I've created a material ui card where the background-color changes upon clicking with an animation effect. The animati ...

javascripthtmlcssreactjsmaterial-ui

Vertical centering not functioning as expected due to issues with margin-top and margin-bottom

I'm having trouble centering my red block in the middle of the webpage, with the footer block at the bottom and the white block between them. Oddly enough, margin-top doesn't seem to be working for me, but left and right are functioning fine. Al ...

jqueryhtmlcss

Is it possible to effortlessly associate a personalized string with an identifier within an HTML element utilizing Angular2?

Check out this cool plunker import {Component} from 'angular2/core' @Component({ selector: 'my-app', template: ` <div *ngFor="#option of myHashMap"> <input type="radio" name="myRadio" id="{{generateId(option[& ...

javascripthtmltypescriptangular

Using flexbox css to arrange content on the top, bottom, and right side

Just getting started with flexbox and I'm trying to position content on the top, bottom, and right side. Check out the demo However, I also need to adjust it for mobile view like the image shown below: https://i.sstatic.net/1YxtZ.png The left and r ...

htmlcssflexbox

jQuery code not being triggered on secondary page

I'm currently working on a website project for one of my university courses (Link: ) and I'm encountering an issue that I could use some help with. The problem involves a "back-to-top" button that uses jQuery to smoothly scroll the page upwards. ...

javascriptjqueryhtml

Trick for hiding CSS elements when input field is vacant

Is there a way to hide the search result when the input is empty? While everything is functioning correctly, I would like to prevent the search result from remaining visible after clearing the input field. For example, if you type 'A' and then d ...

htmlcss

jQuery slideToggle effect causes neighboring elements to move

After clicking on the element I've set as the trigger for slideToggle, it moves a few pixels to the right without any apparent cause. It seems like there might be an issue with the CSS, but I'm having trouble pinpointing the exact problem. You c ...

jquerycss

Tips for creating a single div element on a React form

I have a form that is generated using the array map method in React. I am trying to add either 'box-one' or 'box-two' div element when clicking on the add button, but currently both div elements are being added. How can I ensure that on ...

javascriptarraysreactjsformsnext.js

How come the paragraph shifts downward when I use a jQuery custom plugin to add the image source?

Check out the code below: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <head> <title>Box using Plugin</title> <script> ...

jqueryhtmlcssjquery-plugins

Summernote information embedded with HTML elements

I just started using the summernote text editor and I'm trying to figure out how to extract the content from the textarea without all the HTML tags. This is what I have in my code: <textarea class="summernote" id="summernote" ng-model="blog.c ...

javascripthtmlangularjssummernote

Tips on controlling the color of an input field in a form using React

Within my React app, there is a text input field situated inside a form that displays in its default gray color before any interaction: https://i.stack.imgur.com/FdNos.png Once the input field is clicked on, it changes to white as shown here: https://i.s ...

htmlcssformsinput-field

Adjusting the width of the responsive design is causing additional white space to appear in

I have a website that uses responsive CSS, including media queries at 768px, 480px, and 320px. However, when I resize the screen below 1040px, I notice some extra space appearing on the right margin of the entire page and I'm struggling to identify th ...

csshtmlwordpressresponsive-designmedia-queries

Only on mobile devices, Material-UI components spill over the screen

Update: This issue is isolated to one specific page. Other pages within the website are displaying correctly. Recently, I developed a web page using React and Material-UI. The main components utilized are Grid and Container. While the layout appears fine ...

javascripthtmlcssreactjsmaterial-ui

Make the text in the SCSS file placeholder bold

Within my Angular front end application, there is a form containing a textarea: <mat-form-field class="full-width"> <textarea class="left-aligned" formcontrolname="x1" matInput placeholder="some text"/> </mat-form-field> In the co ...

cssangularhtml

Exploring the magic of cubic-bezier transitions in combination with Bootstrap Tabs buttons

I'm experimenting with creating a tab button switching animation similar to a specific reference, but without using Bootstrap Tabs. var tabs = $('.tabs'); var selector = $('.tabs').find('a').length; //var selector = ...

htmlcssbootstrap-5

Utilizing carouFredsel for thumbnails and compatibility with IE7

I've successfully integrated carouFredSel (using the basic example with next/prev and pagination) on Chrome, Firefox, IE9, and IE8. However, when I tested it on IE7, the plugin didn't seem to work correctly. The list just displayed vertically wit ...

jquerycssinternet-explorer-7implementation