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.
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 highlight on an select after press it
As i guessed, its due to bootstrap styles:
.form-control:focus /* => from bootstrap css */
{
...
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); /* => this cause the highlight! */
}
it sets a box-shadow for .form-control:focus
. you have to override it in your css:
input:focus,select:focus, .form-control:focus,textarea:focus,button:focus { outline: none !important; box-shadow: none !important;}
body { padding: 40px 20px 20px 20px;}
.qa-collapse { background-color: rgb(245, 245, 245);}
.qa-input { border-top-left-radius: 50px; border-bottom-left-radius: 50px; border-right: none !important; border: 1px solid #F2F2F2; width: 82%; padding: .25rem .75rem; font-size: 1rem; line-height: 1.5; color: #495057; background-color: #fff; background-image: none; background-clip: padding-box; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;}
.qa-search { border-top-right-radius: 50px; border-bottom-right-radius: 50px; background-color: #E01E34; border: 1px solid #E01E34; padding: .2rem .75rem;}
input[type="text"].qa-input::-webkit-input-placeholder { color: ; font-size: 80%; font-family: PosLight;}
.qa-search img { margin-top: -3px;}
.qa-form-inline { display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-align: center; align-items: center;}
.qa-track-trace p { font-family: PosLight; font-size: 12px; padding: 0 2.6rem 0 0.7rem; color: #999999;}
.nav-tabs { border: 0px;}
.nav-tabs .nav-link.active { border: 0px; border-top-right-radius: 0; border-top-left-radius: 0; background-color: transparent; border-color: transparent;}
.nav-tabs .nav-link:hover { border-color: transparent;}
.nav-tabs .nav-link { border: 0px; border-top-right-radius: 0px; border-top-left-radius: 0px; background-color: transparent;}
.qa-send-lp-tab { color: rgba(0, 0, 0, .5); display: block; padding: 0rem 1rem;}
.qa-send-lp-tab:hover { color: rgba(0, 0, 0, .7);}
.qa-send-lp-tab.active { color: #E11F34 !important;}
.qa-track-trace p { font-family: PosLight; font-size: 12px; padding: 0 2.6rem 0 0.7rem; color: #999999;}
.qa-input-full { border-radius: 50px; border: 1px solid #F2F2F2; width: 100%; padding: .25rem .75rem; font-size: 1rem; line-height: 1.5; color: #495057; background-color: #fff; background-image: none; background-clip: padding-box; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;}
input[type="text"].qa-input-full::-webkit-input-placeholder { color: ; font-size: 80%; font-family: PosLight;}
input[type="text"].qa-input-full::-webkit-input-placeholder { color: ; font-size: 80%; font-family: PosLight;}
.qa-dropdown { border-top-right-radius: 50px; border-bottom-right-radius: 50px; background-color: #E01E34; border: 1px solid #E01E34; padding: .20rem .75rem;}
.qa-dropdown img { margin-top: -3px;}
select.form-control { -webkit-appearance: none; -moz-appearance: none; background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='18' height='18' viewBox='0 0 24 24'><path fill='grey' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>") #fff; /* background: url(../img/dropdown-2.svg); */ /* background: url(../img/dropdown.svg); */ /*background-position: 91.5% 50%; */ background-position: 95% 50%; background-repeat: no-repeat;}
select.form-control:not([size]):not([multiple]) { height: 35px; border: 1px solid #F2F2F2; border-radius: 50px; border: 1px solid #F2F2F2; width: 100%; padding: .25rem .75rem; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;}
.styled-select { font-size: 12px; font-family: 'PosLight';}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <form class="qa-form-inline mt-2"><select name="dbType" id="selectOptions" class="form-control required styled-select"> <option value="option-select" disabled selected>Service</option> <option value="option-1" class="option-grams">Example</option> <option value="option-2" class="option-grams">Example</option> <option value="option-3" class="option-grams">Example</option> <option value="option-4" class="option-grams">Example</option> <option value="option-5" class="option-grams">Example</option> <option value="option-6" class="option-grams">Example</option> <option value="option-7" class="option-grams">Example</option> <option value="option-8" class="option-grams">Example</option> </select></form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
How do I get rid of select element outline in Firefox?
Credit to this post here: https://stackoverflow.com/a/18853002/1261316
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
How to remove dashed border of select box in Firefox
Add the below to your CSS, it should fix it.
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
Demo Fiddle
How to remove focus border (outline) around text/input boxes? (Chrome)
This border is used to show that the element is focused (i.e. you can type in the input or press the button with Enter). You can remove it with outline property, though:
textarea:focus, input:focus{
outline: none;
}
You may want to add some other way for users to know what element has keyboard focus though for usability.
Chrome will also apply highlighting to other elements such as DIV's used as modals. To prevent the highlight on those and all other elements as well, you can do:
*:focus {
outline: none;
}
⚠️ Accessibility warning
Please notice that removing outline from input is an accessibility bad practice. Users using screen readers will not be able to see where their pointer is focused at. More info at a11yproject
Related Topics
Javaserver Faces 2.2 and Html5 Support, Why Is Xhtml Still Being Used
Hide Textfield Blinking Cursor
How to Position Two Elements Side by Side Using Css
How to Display Raw HTML Code in Pre or Something Like It But Without Escaping It
What Is "X-Content-Type-Options=Nosniff"
How to Uninstall a Service Worker
How to Find Unused Images and CSS Styles in a Website
What Is the HTML Tabindex Attribute
Making the Main Scrollbar Always Visible
Multiple Radio Button Groups in One Form
Apply CSS Styles to an Element Depending on Its Child Elements
Common Header/Footer With Static Html
Why Should I Use 'Li' Instead of 'Div'
Do We Still Need Forward Slashes When Closing Void Elements in Html5
:Not(:Empty) CSS Selector Is Not Working
What Character Encoding Should I Use for a Web Page Containing Mostly Arabic Text? Is Utf-8 Okay