Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cannot remove outline/dotted border from Firefox select drop down [duplicate]

Tags:

html

css

forms

I have a styled down down, but I cannot remove the dotted border when it is clicked in Firefox. I've used outline: none but it still doesn't work. Any ideas?

CSS:

.styled-select {     background: lightblue;     font-size: 20px;     height: 50px;     line-height: 50px;     position: relative;     border: 0 none !important;     outline: 1px none !important; } .styled-select select {    background: transparent;    border: 0;    border-radius: 0;    height: 50px;    line-height: 50px;    padding-top: 0; padding-bottom: 0;    width: 100%;    -webkit-appearance: none;           text-indent: 0.01px;    text-overflow: '';    border: 0 none !important;    outline: 1px none !important; } 

HTML:

<div class="styled-select">     <select id="select">         <option value="0">Option one</option>         <option value="1">Another option</option>         <option value="2">Select this</option>         <option value="3">Something good</option>         <option value="4">Something bad</option>     </select> </div> 

Please see this jsFiddle.

like image 475
shrewdbeans Avatar asked Oct 18 '13 13:10

shrewdbeans


People also ask

How do I get rid of the dotted border when I click a link?

We can remove the default behavior of hyperlinks which is to show a dotted outline around themselves when active or focused by declaring CSS outline property on active/focused links to be none.

How do I get rid of the dotted border?

Select the cells from which you want to remove the dotted border. Click the Home tab. In the Font group, click on the 'Border' drop-down. In the border options that appear, click on 'No Border'


1 Answers

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; } 
like image 163
shrewdbeans Avatar answered Nov 08 '22 21:11

shrewdbeans