Trying to customize a <select> element in Firefox. I successfully styled it in Chrome using the following CSS:
-webkit-appearance: none;
background: #eeeeee url("../img/select-arrow.jpg") no-repeat center right;
However, I'm facing difficulties achieving the same outcome in Firefox with:
-moz-appearance: none;
background: #eeeeee url("../img/select-arrow.jpg") no-repeat center right;
Any suggestions or solutions would be greatly appreciated. Thank you.
Starting from Firefox 35, the CSS property "-moz-appearance:none" you included in your code will successfully eliminate the arrow button as intended.
This issue was identified as a defect and has been resolved since that specific version of the browser.
It appears that there is a bug with Firefox when using the -moz-appearance:none property with select elements. For more details on this issue, you can refer to the bug report here: https://bugzilla.mozilla.org/show_bug.cgi?id=649849
Identical to this one:
Similar response:
Just discovered a way to eliminate the select arrow in Firefox by using a combination of -prefix-appearance, text-indent, and text-overflow. This method is purely CSS and does not require any additional markup.
select {
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
Successfully tested on Windows 8, Ubuntu, and Mac with the latest versions of Firefox.
See it in action: http://jsfiddle.net/joaocunha/RUEbp/1/
Additional information available at: https://gist.github.com/joaocunha/6273016
UPDATE[3]: As @jane-doe's amazing technique no longer functions in FF31, check out this innovative solution: http://jsfiddle.net/example/9ABCd/ (inspired by @john-smith's flexbox workaround and some CSS wizardry)
UPDATE: Achieving the same effect with just CSS is possible, as illustrated here: http://jsfiddle.net/example/opqRs/
This method will format elements in Chrome, Firefox, IE11+ and gracefully adapt for older versions of IE and other outdated browsers. It includes various vendor-specific fixes like -webkit-appearance: none that you previously mentioned.
Experiment with different values for the -moz-appearance property. In my case, using -moz-appearance: toolbox; gave me the desired result.
To explore the full list of available values, you can visit this link: https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance
Check out the code snippet below:
<h2>CSS-only custom-styled selects v8</h2>
<p><Strong>How this works:</strong> This styles a native select consistently cross-platform with only minimal CSS. The native select is then styled so it is essentially invisible (no appearance, border, bg) leaving only the select's text visible. There is a wrapper around the select that has the majority of the button styles (gradient, shadow, border, etc.). We then add the custom arrow via a pseudo element to the right. </p>
<label>Native select</label>
<select>
<option>Apples</option>
<option>Bananas</option>
<option>Grapes</option>
<option>Oranges</option>
<option selected>A very long option name to test wrapping</option>
</select>
<label class="wrapper">This label wraps the select
<div class="button custom-select ff-hack">
<select>
<option>Apples</option>
<option>Bananas</option>
<option>Grapes</option>
<option>Oranges</option>
<option>A very long option name to test wrapping</option>
</select>
</div>
</label>
<label class="wrapper" for="states">This label is stacked above the select</label>
<div class="button custom-select">
<select id="states">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
...
</select>
</div>
...
And here are the corresponding styles:
/* Some basic page styles */
body {
background-color: #fff;
font-family: helvetica, sans-serif;
margin: 4% 10%
}
/* Label styles: style as needed */
label {
display:block;
margin-top:2em;
font-size: 0.9em;
color:#777;
}
...
/* ------------------------------------ */
/* END OF UGLY BROWSER-SPECIFIC HACKS */
/* ------------------------------------ */
Reference: http://jsfiddle.net/xvushd7x/
I decided to customize the appearance of the select element in Firefox to match that of Chrome. By using CSS and an SVG, I was able to replace the default down chevron with a more stylish design.
select {
width: 100px;
height: 30px;
border: 1px solid #ccc;
border-radius: 3px;
background-color: white;
@-moz-document url-prefix() {
-moz-appearance: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center right;
}
}<select>
<option>The quick</option>
<option>Brown fox</option>
<option>Jumps over</option>
<option>The lazy</option>
<option>Doggo</option>
</select>To customize the appearance of a select box in Firefox, you can utilize CSS to target specific elements and apply custom styles. Check out this example code snippet below:
/* Custom styling for select box */
.custom-select {
/* Add your desired styles here */
}
/* Target other elements as needed */
<select class="custom-select">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
This CSS will enable you to style the select box by adjusting the font, padding, border, background color, and integrating a customized down arrow icon. It overrides default browser styles and provides unique appearances for both the dropdown menu options and the selected option. Remember to update the file path in the background-image property with the location of your own down arrow image.
To incorporate this CSS code into your HTML document, place it within a <style> tag in the head section or link an external CSS file using a <link> tag.
Disclaimer: Please note that these styles are specifically tailored for Firefox and may not be fully supported in all web browsers.
Struggling to incorporate a logo into the navbar of my website. It looks good on larger screens, but causes the navbar to break on smaller screens. View without the logo: Click Here View with the logo and resizing issues: Click Here I think I can make th ...
My application is developed in APEX 5.1.2 and I'm struggling with inserting fields in RTL layout. It's cumbersome having to manually change the keyboard layout every time I work on these fields. Is there a way to have a field automatically switch ...
I am currently exploring the most effective method to determine the visibility state of a div container with the CSS property position: absolute. On the left side of my viewport, I have a sidebar. By clicking the "sidebar-button," the sidebar smoothly tra ...
Apologies for any confusion in how I'm presenting this question. What I am aiming for is to have the "output" display right next to the slider, rather than below it. To see the issue: visit alainbruno.nl/form.html As I am just beginning with HTML5, ...
I have come up with a code snippet that generates li elements with input values after submitting the form. However, there is an issue where if you start typing in the input field again, it will overwrite all existing li elements. import './App.css&apo ...
First, I moved the dompdf library folder to /dompdf Next, I added a /fonts folder containing Roboto-Black.ttf Then, I created an index.php file <?php // Autoloader inclusion require_once 'dompdf/autoload.inc.php'; // Namespace reference ...
I am working with the slick slider and aiming to achieve a specific layout for the slider itself. What I require is a structure that looks like this: div div div div div I have managed to implement this design successfully, bu ...
Hi everyone, this is my first time posting here so I apologize in advance if there are any issues with my markup. I'm still getting used to the SOF framework for writing posts. Currently, I am working on trying to make social icons bounce on hover on ...
Using Bootstrap on a table causes an unexpected empty column to appear on the right side (as shown in the screenshot). This issue is strange because it works fine with another table using the same setup... but this particular table seems to have a mind of ...
As part of my journey to learn about coding in HTML/JS/CSS, I decided to create a top-down shooter game. While I've successfully implemented player movement and rotation on the canvas, I'm struggling with getting the gun mechanics to work properl ...
Trying to find the height of the html element specified below, I am utilizing Jquery as shown in the example. The expected result for variable x is greater than 40 pixels; however, it consistently returns 10. By adjusting the padding from 5 pixels to 6 on ...
Below is an example of HTML: <div itemid="MenuContainer" id="MenuContainer" class="MenuContainer"> Here is an example of CSS: #MenuContainer { /* Styles */ } Is there a way to target ItemID with CSS instead of the usual ID? ...
I've been attempting to configure a flexbox layout with multiple input fields, but I'm having trouble achieving the desired look. Here is the code snippet that I've been working with: .inputSettings { display: flex; flex-direction: ro ...
I am attempting to use JQuery to find the height of the tallest element and then add that height to other elements that are shorter. My goal is to assign the class, main-nav-special-padding, to these shorter elements using my current JQuery code. I tried t ...
When I first load the page and click on the Sales accordion, then proceed to click on Total reported and forecasted sales, the scrollbar jumps back up to the top The marked ng-container is specifically for the UI of Total reported and forecasted sales He ...
Exploring ways to scope the CSS of my Vue component, I initially considered using less to encapsulate my styles. However, after discovering the scoped attribute as the recommended method, I realized that my approach needed adjustment. In my original setup ...
`@media(min-width:300px)and(max-width:400px){ div{ background-color: pink; } }` While experimenting with responsive design techniques, I attempted to implement this code snippet. However, it did not work as expected in Visual Studio Code. ...
Having an issue with the bootstrap navbar link displaying on small devices. Here is the template I'm using: https://i.sstatic.net/jSy1b.png The last item is displaying in two lines. ...
I've provided the code snippet at this link: http://jsfiddle.net/LnWRL/4/: Here is the HTML: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <div id="wrap_demo"> <div id="demo"></di ...
My table consists of three cells with widths of 30%, 40%, and 30% respectively. The table itself occupies 25% of its container, which can range from 1024px to 400px. The first cell contains a button labeled GALLERY. Upon hovering over the cell, the text c ...