Remove dotted border/outline of focused dropdown menu
On windows 7 and IE9 no border/outline is shown, Instead a blue background is shown. The blue background and in your case the border/outline is managed by the OS. I suspect your are on a Mac?
Remove outline from select box in FF
How to remove Firefox's dotted outline on BUTTONS as well as links?
Cannot remove outline/dotted border from Firefox select drop down
Found my answer here: https://stackoverflow.com/a/18853002/1261316
It wasn't set as the correct answer, but it worked perfectly for me:
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
select {
background: transparent;
}
How to remove border of drop down list : CSS
The most you can get is:
select#xyz {
border:0px;
outline:0px;
}
You cannot style it completely, but you can try something like
select#xyz {
-webkit-appearance: button;
-webkit-border-radius: 2px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-webkit-padding-end: 20px;
-webkit-padding-start: 2px;
-webkit-user-select: none;
background-image: url(../images/select-arrow.png),
-webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #AAA;
color: #555;
font-size: inherit;
margin: 0;
overflow: hidden;
padding-top: 2px;
padding-bottom: 2px;
text-overflow: ellipsis;
white-space: nowrap;
}
How to remove the dotted white border around focused button text
These styles are declared at the UA level, so each browser has their own implementation (and in Firefox case, pseudo elements for targeting them).
In Firefox, you can use the ::-moz-focus-inner
pseudo element:
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
border: none;
}
Remove outline from select box in FF
I found a solution, but it is mother of all hacks, hopefully it will serve as a starting point for other more robust solutions. The downside (too big in my opinion) is that any browser that doesn't support text-shadow
but supports rgba
(IE 9) won't render the text unless you use a library such as Modernizr (not tested, just a theory).
Firefox uses the text color to determine the color of the dotted border. So say if you do...
select {
color: rgba(0,0,0,0);
}
Firefox will render the dotted border transparent. But of course your text will be transparent too! So we must somehow display the text. text-shadow
comes to the rescue:
select {
color: rgba(0,0,0,0);
text-shadow: 0 0 0 #000;
}
We put a text shadow with no offset and no blur, so that replaces the text. Of course older browser don't understand anything of this, so we must provide a fallback for the color:
select {
color: #000;
color: rgba(0,0,0,0);
text-shadow: 0 0 0 #000;
}
This is when IE9 comes into play: it supports rgba
but not text-shadow, so you will get an apparently empty select box. Get your version of Modernizr with text-shadow
detection and do...
.no-textshadow select {
color: #000;
}
Enjoy.
Related Topics
Center Wrapped Items in a Space-Between Flexbox
Div Elements to Follow a Curved Path with CSS3
How to Get Around The Ie CSS Percentage Rounding Problem
Javafx: Styling Application with CSS Selectors
Why Does Overflow-X:Hidden Clip My Descenders
Horizontally Center <P> Within a Div While Keeping The Text Left-Aligned
Is There a CSS Selector to Match a Option Value of The Select Tag
Difference Between Variable Fonts and Regular Fonts
Align Text to The Right of an Image && Text Doesn't Wrap Around The Image
An Alternative to -Webkit-Transform: Transformy
How to Set a Floating Div's Width to Take Up Remaining Space Without Pushing Other Divs Down
Image-Less Pure-CSS Arrow Tags
How to Edit Auto-Formatting Rules for CSS/Scss/Less Using Prettier in Vscode
Please Explain Rowspan and Colspan, Col and Colgroup