This question already has answers here:
Positioning of an arrow in an HTML select
(7 answers)
Closed 11 months ago.
I have a select dropdown button but I'm having a problem with the arrow, is aligned at the end of the dropdown, which I want to have some padding it, I want to achieve that with CSS or js or in any form that is possible.
Here is the CSS:
.select_box {
display: flex;
width: auto;
font-size: 1.025em;
padding: 0.6em 1em;
border: 1px solid var(--border);
transition: var(--animate);
border-radius: var(--radius);
outline: none;
background: var(--header-bg);
&:hover {
cursor: pointer;
border: var(--icon) 1px solid;
}
}
And here is my Html:
<select value='all'className={styles.select_box}>
<option value='all'>{t('order.status_all')}</option>
<option value='draft'>{t('order.status_draft')}</option>
<option value='new'>{t('order.status_new')}</option>
<option value='order_completed'>{t('order.status_created')}</option>
<option value='invoiced'>{t('order.status_invoiced')}</option>
<option value='paid'>{t('order.status_paid')}</option>
</select>
And here is how it looks:
You can hide the default arrow and then add an image inplace of that .
There is no styling that can style the default arrow icon .
The following code will hide the default arrow and include an image in place of that.
select {
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari and Chrome */
appearance:none;
/* Now add a background image */
padding-right:10px;
background-image:url("./image.png");
background-repeat:no-repeat;
background-position:calc(100%-3px);
background-size:10px;
}
Hope this solves your doubt.
Related
My problem is simple, I have a dark background, and the default white color of select is too problematic.
I tried changing it with background-color but it doesn't work.
The only solution I have is using box-shadow like that:
select { box-shadow: 0 0 10px 100px rgb(41,40,59) inset; color: rgb(200,200,200); }
But then, it hides the arrow.
(It also does it when I use another color, that's not the background's color fault.)
What can I do?
I tried with background-color seems to work fine, also with arrow.
if you mean style the childs of dropdown,
then use this selector ✅ option instead of ❌ select
select {
background-color: blue; /* works fine */
color: white;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
}
/* you can style childs like this */
select option {
background-color: red;
}
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
I have a requirement that i have to change the Border-color of the radio button to Red when form is submitted without any value
I created a custom radio button control with "required" keyword
<input type="radio" id="test1" name="{{'valee' + i + j}}" [(ngModel)]="entity.test" [value]="true" #dept_multimediatransfer="ngModel" required>
Oui
<input type="radio" id="test2" name="{{'valee' + i + j}}" [(ngModel)]="entity.test" [value]="false" #dept_multimediatransfer="ngModel" required>
Non
input[type="radio"] {
/* remove standard background appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* create custom radiobutton appearance */
display: inline-block;
width: 14px;
height: 14px;
padding: 2px;
/* background-color only for content */
background-clip: content-box;
border: 1px solid #bbbbbb;
// background-color: #e7e6e7;
border-radius: 50%;
}
/* appearance for checked radiobutton */
input[type="radio"]:checked {
background-color: #4A4A4A;
}
css:
input.ng-invalid.ng-touched:not(.field-control), select.ng-invalid.ng-touched, p-calendar.ng-invalid.ng-touched > span, input.master-invalid:not(.field-control) {
border: solid 1px red;
}
it working fine in chrome but not working in IE, could someone help
You can use [ngClass] property from Angular to add a conditional class which will add a CSS class that will give the red color to the tag or use [ngStyle] to give conditional style directly in the tag.
also, to give the condition, use a boolean variable that will be set to true once you click on the submit button and values are not entered.
I have a web page that have background-image in it. After that, there's a combo box for filtering some content. I want to create this select - option background being transparent. I've read many result at google to use select option at CSS, but it didn't work. I've create a fiddle in here : http://jsfiddle.net/25CQE/5 For example and as You can see, the option background is not transparent. So, any idea how to solve that? Or it cannot be done by CSS?
Sorry for my bad English
If you want to make it fully transparent, than use
select {
border: 1px solid #fff;
background-color: transparent;
}
Demo
If you are looking to have semi-transparent background color, than you can use rgba() where a stands for alpha
select {
border: 1px solid #fff;
background-color: rgba(255,255,255,.5);
padding: 5px;
}
Demo 2
try this:
body
{
background: #82caff;
}
select {
padding: 5px;
color: #000;
font-size: 12px;
background: transparent;
-webkit-appearance: none;
}
select option{
background-color: #82caff;
}
<select id="nname">
<option value="volvo">Volvo</option>
<option value="peugeot">peugeot</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Just add
select {background:transparent;}
--edit additional --
You wont be able to style the options, because these take the style from the os or browser. You could try a javascript solution for nicer form elements such as http://uniformjs.com/ - you could then use a transparent image perhaps
you can change the color for select option on css file or style, the following way:
select option {
background-color: transparent;
}
or for the main select input
select {
background-color: transparent;
}
demo
This seems like a trivial problem, but I can't figure it out.
On Bootstraps own website they have the Select example.
Looking at the code it looks like there's a border-radius of 4 on that select element.
My hope would be that changing that border-radius to 0 would then remove the border-radius from the select element, however, that's not the case - as seen in the picture below.
I've explored all the CSS that is changing that select element but none of it seems to remove the border radius.
Here is a version that works in all modern browsers. The key is using appearance:none which removes the default formatting. Since all of the formatting is gone, you have to add back in the arrow that visually differentiates the select from the input. Note: appearance is not supported in IE.
Working example: https://jsfiddle.net/gs2q1c7p/
select:not([multiple]) {
-webkit-appearance: none;
-moz-appearance: none;
background-position: right 50%;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
padding: .5em;
padding-right: 1.5em
}
#mySelect {
border-radius: 0
}
<select id="mySelect">
<option>Option 1</option>
<option>Option 2</option>
</select>
Based on Arno Tenkink's suggestion in the comments, here is an example using a svg instead of a png for the arrow icon.
select:not([multiple]) {
-webkit-appearance: none;
-moz-appearance: none;
background-position: right 50%;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" version="1"><path d="M4 8L0 4h8z"/></svg>');
padding: .5em;
padding-right: 1.5em
}
#mySelect {
border-radius: 0
}
<select id="mySelect">
<option>Option 1</option>
<option>Option 2</option>
</select>
In addition to border-radius: 0, add -webkit-appearance: none;.
I had the same issue and while user1732055's answer fixes the border, it removes the dropdown arrows. I solved this by removing the border from the select element and creating a wrapper span which has a border.
html:
<span class="select-wrapper">
<select class="form-control no-radius">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</span>
css:
select.no-radius{
border:none;
}
.select-wrapper{
border: 1px solid black;
border-radius: 0px;
}
https://jsfiddle.net/Lrqh0drd/6/
You can use -webkit-border-radius: 0;. Like this:-
-webkit-border-radius: 0;
border: 0;
outline: 1px solid grey;
outline-offset: -1px;
This will give square corners as well as dropdown arrows. Using -webkit-appearance: none; is not recommended as it will turn off all the styling done by Chrome.
Using the SVG from #ArnoTenkink as an data url combined with the accepted answer, this gives us the perfect solution for retina displays.
select.form-control:not([multiple]) {
border-radius: 0;
appearance: none;
background-position: right 50%;
background-repeat: no-repeat;
background-image: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%20%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%20%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2214px%22%20height%3D%2212px%22%20viewBox%3D%220%200%2014%2012%22%20enable-background%3D%22new%200%200%2014%2012%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cpolygon%20points%3D%223.862%2C7.931%200%2C4.069%207.725%2C4.069%20%22/%3E%3C/svg%3E);
padding: .5em;
padding-right: 1.5em
}
the class is called:
.form-control { border-radius: 0; }
be sure to insert the override after including bootstraps css.
If you ONLY want to remove the radius on select form-controls use
select.form-control { ... }
instead
EDIT: works for me on chrome, firefox, opera, and safari, IE9+ (all running on linux/safari & IE on playonlinux)
Im trying to style a <select> in firefox. In chrome I made it with:
-webkit-appearance: none;
background: #eeeeee url("../img/select-arrow.jpg") no-repeat center right;
But on firefox I cant seem to be able to get the same result with
-moz-appearance: none;
background: #eeeeee url("../img/select-arrow.jpg") no-repeat center right;
Any ideas? Thanks.
Since Firefox 35, "-moz-appearance:none" that you already wrote in your code, finally remove arrow button as desired.
It was a bug solved since that version.
Looks like this is bug on Firefox: -moz-appearance:none with select element.
See this bug report for more information: https://bugzilla.mozilla.org/show_bug.cgi?id=649849
Exact duplicate as this one: https://stackoverflow.com/a/18317228/1411163
Same answer:
Just figured out how to remove the select arrow from Firefox. The trick is to use a mix of -prefix-appearance, text-indent and text-overflow. It is pure CSS and requires no extra markup.
select {
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
Tested on Windows 8, Ubuntu and Mac, latest versions of Firefox.
Live example: http://jsfiddle.net/joaocunha/RUEbp/1/
More on the subject: https://gist.github.com/joaocunha/6273016
EDIT[2]: Since #joão-cunha's awesome trick stopped working in FF30, see this new workaround: http://jsfiddle.net/sstur/2EZ9f/ (based on #keska's display:flex fix and some text-shadow magic)
EDIT: This can be done using pure CSS, as demonstrated here: http://jsfiddle.net/sstur/fm5Jt/
This will style it in Chrome, Firefox, IE10+ and will gracefully degrade in old IE and other legacy browsers. It uses various vendor-specific workarounds including -webkit-appearance: none as you mentioned.
You can try to use different value for -moz-appearance property. For example
-moz-appearance: toolbox; works fine for me.
Full list of values can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance
Try below code sample:
<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>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
<div style="width:50%; min-width:10em;">
<label class="wrapper">In 50% wide container
<div class="button custom-select">
<select>
<option>Apples</option>
<option>Bananas</option>
<option>Grapes</option>
<option>Oranges</option>
<option>A very long option name to test wrapping and visual collisions</option>
</select>
</div>
</label>
</div>
<label>Text input:
<input type="text" placeholder="I'm a placeholder">
</label>
<h4>Todd Parker - Filament Group Inc.</h4>
<h4>Taken From Todd Parker's JSBIN</h4>
<h4>Taken From Joaocunha's Gist</h4>
<p><strong>Joaocunha's Update:</strong> Thu Oct 02, 2014<br>
Mozilla to address this issue (Target: v.35)<br>
<i>Bug 649849, part 1 - Make -moz-appearance:none on a combobox remove the dropdown button (for WebKit compat). r=roc</i></p>
<h2>Confirmed to work in the following browsers</h2>
<p>This technique seems to be functional everywhere since we're still leaving the native select in place. Worst case, the native select styling and the custom arrow will both show up but in all popular platforms, this looks very good and consistent. One minor caveat: setting the select to 110% means the menu may open up a bit wider than expected in Firefox. Visual Test results</p>
<h3>Custom select styled consistently</h3>
<ul>
<li>iOS 4/5/6/7/8 - looks good, iOS3 even works fine but isn't quite as pretty</li>
<li>Android 2.2/2.3 (Browser) - looks good</li>
<li>Android 4.0/4.1/4.2 (Browser) - looks good</li>
<li>Android 4.0/4.1/4.2/4.3/4.4 (Chrome) - looks good</li>
<li>WP8 - looks good</li>
<li>Kindle Fire 2/HD - looks good</li>
<li>IE 10/11 - looks good</li>
<li>Safari 5 - looks good</li>
<li>Chrome 22-35 - looks good</li>
<li>Opera 15-22 - looks good</li>
</ul>
<h3>Custom select with minor visual issues</h3>
<ul>
<li>iOS3 even works fine but isn't quite as pretty</li>
<li>Firefox (all versions) - select menu when open is wider then it needs to be (by ~50px) to clip off the native arrow. Note that the select text can run under the arrow, no solution found for that.</li>
<li>Opera Mini - alignment of text and arrows is a bit off but it works</li>
<li>Opera Mobile - custom and native arrows both appear</li>
<li>Nokia Asha - Long options can break outside the box</li>
</ul>
<h3>Native select</h3>
<ul>
<li>WP 7.5-7.8 - native select</li>
<li>IE 6/7/8/9 - native select</li>
<li>Opera pre-14 - native select</li>
</ul>
And 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;
}
/* Container used for styling the custom select, the buttom class below adds the bg gradient, corners, etc. */
.custom-select {
position: relative;
display:block;
margin-top:0.5em;
padding:0;
}
/* These are the "theme" styles for our button applied via separate button class, style as you like */
.button {
border: 1px solid #bbb;
border-radius: .3em;
box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
background: #f3f3f3; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */
}
/* This is the native select, we're making everything but the text invisible so we can see the button styles in the wrapper */
.custom-select select {
width:100%;
margin:0;
background:none;
border: 1px solid transparent;
outline: none;
/* Prefixed box-sizing rules necessary for older browsers */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* Remove select styling */
appearance: none;
-webkit-appearance: none;
/* Font size must the 16px or larger to prevent iOS page zoom on focus */
font-size:16px;
/* General select styles: change as needed */
font-family: helvetica, sans-serif;
font-weight: bold;
color: #444;
padding: .6em 1.9em .5em .8em;
line-height:1.3;
}
/* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select. Note this si a 2x image so it will look bad in browsers that don't support background-size. In production, you'd handle this resolution switch via media query but this is a demo. */
.custom-select::after {
content: "";
position: absolute;
width: 9px;
height: 8px;
top: 50%;
right: 1em;
margin-top:-4px;
background-image: url(http://filamentgroup.com/files/select-arrow.png);
background-repeat: no-repeat;
background-size: 100%;
z-index: 2;
/* These hacks make the select behind the arrow clickable in some browsers */
pointer-events:none;
}
/* Hover style */
.custom-select:hover {
border:1px solid #888;
}
/* Focus style */
.custom-select select:focus {
outline:none;
box-shadow: 0 0 1px 3px rgba(180,222,250, 1);
background-color:transparent;
color: #222;
border:1px solid #aaa;
}
/* Set options to normal weight */
.custom-select option {
font-weight:normal;
}
/* ------------------------------------ */
/* START OF UGLY BROWSER-SPECIFIC HACKS */
/* ---------------------------------- */
/* OPERA - Pre-Blink nix the custom arrow, go with a native select button to keep it simple. Targeted via this hack http://browserhacks.com/#hack-a3f166304aafed524566bc6814e1d5c7 */
x:-o-prefocus, .custom-select::after {
display:none;
}
/* IE 10/11+ - This hides native dropdown button arrow so it will have the custom appearance, IE 9 and earlier get a native select - targeting media query hack via http://browserhacks.com/#hack-28f493d247a12ab654f6c3637f6978d5 - looking for better ways to achieve this targeting */
/* The second rule removes the odd blue bg color behind the text in the select button in IE 10/11 and sets the text color to match the focus style's - fix via http://stackoverflow.com/questions/17553300/change-ie-background-color-on-unopened-focused-select-box */
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.custom-select select::-ms-expand {
display: none;
}
.custom-select select:focus::-ms-value {
background: transparent;
color: #222;
}
}
/* FIREFOX won't let us hide the native select arrow, so we have to make it wider than needed and clip it via overflow on the parent container. The percentage width is a fallback since FF 4+ supports calc() so we can just add a fixed amount of extra width to push the native arrow out of view. We're applying this hack across all FF versions because all the previous hacks were too fragile and complex. You might want to consider not using this hack and using the native select arrow in FF. Note this makes the menus wider than the select button because they display at the specified width and aren't clipped. Targeting hack via http://browserhacks.com/#hack-758bff81c5c32351b02e10480b5ed48e */
/* Show only the native arrow */
#-moz-document url-prefix() {
.custom-select {
overflow: hidden;
}
.custom-select select {
width: 120%;
width: -moz-calc(100% + 3em);
width: calc(100% + em);
}
}
/* Firefox focus has odd artifacts around the text, this kills that. See https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-focusring */
.custom-select select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
/* ------------------------------------ */
/* END OF UGLY BROWSER-SPECIFIC HACKS */
/* ------------------------------------ */
Reference: http://jsfiddle.net/xvushd7x/
I wanted to make the select element in Firefox look like it does in Chrome (as of this writing). This CSS includes the svg to replace the down chevron.
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>