Reputation: 5737

Remove outline from select box in FF

Is it possible to remove the dotted line surrounding a selected item in a select element?

alt text

I have tried to add the outline property in CSS but it did not work, at least not in FF.

<style>
   select { outline:none; }
</style>

Update
Before you go ahead and remove the outline, please read this.
http://www.outlinenone.com/

Upvotes: 100

Answers (15)

Fleshgrinder

Reputation: 16303

Well, Duopixel’s answer is plain perfect. If we go a step further we can make it bulletproof.

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

Only valid for Firefox and the ugly dotted outline around the selected option is gone.

Upvotes: 165

SS Sid

Reputation: 457

https://ssiddique.info/projects/jqueryplugins/demo/index.php?demo=CheckboxStylized check this out Download the plugin from here

Upvotes: 0

Rakesh Yembaram

Reputation: 433

select:focus {
  box-shadow: none;
}

To remove the outline of the select box when selected/focused.

Upvotes: 0

Hamad

Reputation: 15

Step 1) Add HTML: Add the select options of your choice and add the attribute: contenteditable="true"

Step 2) Add CSS: Use the [attribute] selector to select all elements that are contenteditable, and remove the border with the outline property:

[contenteditable] {
  outline: 0px solid transparent;
}
select {
  border: none;
}

<select contenteditable="true">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

Upvotes: 0

Ahad Khwaja

Reputation: 171

Add border-style: none to your select in CSS.

select {
border-style: none; }

Upvotes: -1

Moses Dike Okore

Reputation: 1

This will remove focus from the select element and the outline:

$("select").click(function(){
    $(this).blur();
});

Though this isn't without its shortcomings on other browsers. You'll want to check the browser the user is using:

if (FIREFOX) {
    //implement the code
}

Upvotes: -4

Hasnain Mehmood

Reputation: 417

Remove outline/dotted border from Firefox All Selectable Tags.

Put this line of code in your style sheet:

*:focus{outline:none !important;}

Upvotes: 1

Álvaro González

Reputation: 146660

In general, form controls are impossible to style to that degree of accuracy. There's no browser I'm aware of that supports a sensible range of properties in all controls. That's the reason why there're a gazillion JavaScript libraries that "fake" form controls with images and other HTML elements and emulate their original functionality with code:

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

...

Upvotes: 9

user2577904

Reputation: 7

    input[type='range']::-moz-focus-outer {
    border: 0;
    outline: none !important;
    }

working 100%

Upvotes: -2

Wayne Dunkley

Reputation: 241

Here is a collaboration of solutions to fix styling issues with Firefox select boxes. Use this CSS selector as part of your usual CSS reset.

Class removes outline as per question but also removes any background image (as I usually use a custom dropdown arrow and Firefoxes system dropdown arrow can't currently be removed). If using background image for anything other than dropdown image, simply remove line background-image: none !important;

@-moz-document url-prefix() {
    select, select:-moz-focusring, select::-moz-focus-inner {
       color: transparent !important;
       text-shadow: 0 0 0 #000 !important;
       background-image: none !important;
       border:0;
    }
}

Upvotes: 20

Kyzer

Reputation: 568

This will target all firefox versions

@-moz-document url-prefix() { 
    select {
       color: transparent !important;
       text-shadow: 0 0 0 #000 !important;
    }
}

You might want to remove the !important, if you plan to have the outline appear on other pages across your site that use the same stylesheet.

Upvotes: 9

Faizan

Reputation: 776

Here comes the solution

:focus {outline:none;}
::-moz-focus-inner {border:0;}

Upvotes: 1

malitta

Reputation: 47

<select onchange="this.blur();">

If you use this the border stays until you select an item from the list.

Upvotes: 3

methodofaction

Reputation: 72465

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.

Upvotes: 73

Catfish

Reputation: 19324

Try one of these:

a:active {
 outline: none;
 -moz-outline: none;
}

a {
-moz-user-focus: none;
}

Reference

Upvotes: 1

Remove outline from select box in FF

Answers (15)

Related Questions