My select menu looks different in Firefox compared to Chrome/Edge
In Firefox, it displays an "arrow button" https://i.stack.imgur.com/BGFvO.png
However, in Chrome/Edge, the arrow button is not present
https://i.stack.imgur.com/PXNJn.png
Is there a way to make the Firefox "expand menu" button resemble the one in Chrome/Edge?
<select>
<option>Example</option>
<option>Example</option>
<option>Example</option>
<option>Example</option>
</select>
Here are some clever tricks using linear-gradient for background-image:
select {
/* additional styling */
background-color: black;
color: white;
line-height: 1.5em;
padding: 0.5em 3.5em 0.5em 1em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
}
select.classic {
background-image: linear-gradient(45deg, transparent 50%, white 50%), linear-gradient(135deg, white 50%, transparent 50%), linear-gradient(to right, black, black);
background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), 100% 0;
background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
background-repeat: no-repeat;
}<select class="classic">
<option>Option</option>
<option>Option</option>
<option>Option</option>
</select>When implementing the code snippet below, .packages > .ulWrapper::after { background: linear-gradient( to left, var(--edge-color) 5%, rgba(0, 0, 0, 0) 95% ); /* option 1 - red */ background: linear-gradient( to left, var(--edg ...
Upon updating to the most recent version of MUI, I've noticed a problem with MUI buttons when using the contained variant. <div className="flex"> <Button variant="contained" color="primary" fullWidt ...
Looking for assistance in creating a function to open a facebox when an option from a drop down list is selected. Here is what I have so far: <select><option value="www.google.com/" id="xxx"></option></select> In the header sectio ...
Having trouble selecting an element by linkText within a span tag? It works in Chrome, but not in Firefox. The code I'm using is: login.wait.until(ExpectedConditions.elementToBeClickable(By.linkText("Kassa"))).click(); Other elements without the span ...
I am facing a challenge with my code that involves two selections: category and type. The type selection should be dependent on the category selected from the database. Here is a snippet of my code: HTML $ps_type_table_name = $wpdb->prefix . 'ps_ ...
Currently experiencing some frustration trying to solve the issue at hand. The Uncaught TypeError: $(...).autocomplete is not a function error keeps popping up and I have exhausted all resources on Stack Overflow in an attempt to fix it. This problem is oc ...
I am having trouble with my Angular form as I am only able to display two fields when the page is loaded. Code snippet from Component.html: <div class="card m-3"> <div class="card-body"> <form [formGroup]="surveyFor ...
I'm having a bit of trouble with using react-bootstrap's NavDropdown in my NavBar to display a list of data. Sometimes, the list extends beyond the view and gets cut off at the bottom. I want to add overflow: auto to the list to make it scrollabl ...
For example: FROM <div> whats up! <div> whats up2! </div> thank you for your help <div></div> </div> TO <div> <span>whats up!</span> <div><span> whats up2! </span&g ...
I have been trying to center a QuickSearch div with multiple Q & A sections, but I am having no success. The div is floated to the left and has a background image. HTML <div class="l-row"> <div class="QuickSearch"> <div class="loop"& ...
I am working with an unordered list and I want to use <details> to show a sublist for one of the items: <ul> <li><details> <summary>details bullet</summary> <ul> <li>detail 1</li> ...
Why is it that when I submit forms using these ajax functions in PHP, they only send to the first form on the page? I have multiple forms under each article and I want them to be submitted separately. What am I doing wrong? ...
Hey there, I've been spending a lot of time working with CSS recently, and I have to admit that constantly typing "px" after every width, height, margin, etc., is starting to get on my nerves. I find myself refining pixel values in Firebug quite ofte ...
When working with CSS, I encountered an issue with lag while loading 24 different mask images for a transition effect. To address this, I tried using a div called "preload" to cache the images and prevent lag on playback: <div class='trans' s ...
I can't seem to figure out why the dt and dd elements are not being added to the dl I created. Here's my initial attempt: // Dictionary list var words = [ { term: "Procrastination", definition: "Pathological tendency to s ...
For some reason, I'm encountering issues with the CSS3 property @font-face in certain browsers when trying to use my own fonts. Chrome, Safari, and IE10 work fine, but other browsers present several problems: The code I used looks like this: (fonts G ...
I have integrated the weather.js library into my HTML file by adding the necessary imports: <script src="js/current.js"></script> <script src="js/sugar.min.js"></script> <script src="js/weather.js"></script> <script ...
After creating a PHP page, I encountered an issue while trying to select the inner text of a div and alert it with jQuery. Instead of getting the expected result, it keeps alerting "undefined." What could possibly be causing this? Here is the code snippet ...
I'm having trouble inserting values into the input fields for Item Name and Description. See the HTML code below. <div class="input_fields_wrap"> <div class="input_fields_subwrap"><!-- this div is repeatable(dynamic form)--> ...
I've implemented a basic JSF line chart with PrimeFaces (using jqPlot library) in my project: <p:lineChart id="linear" value="#{team.chart}" title="Lap Times" xaxisLabel="Lap" yaxisLabel="Time ...