CODEWITHSUNDEEP
css
Jay.
Jay.

Reputation: 331

Remove dotted border/outline in focused option in HTML select in Firefox

I'm unable to remove the dotted border/outline around the selected/focused option in the multiple size select. It appears like this:

enter image description here

I have tried several things such :

:focus {
    outline:none;
}

::-moz-focus-inner {
    border:0;
    outline: none; 
}
select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

None of it seems to work. Here's the JSFiddle Link: https://jsfiddle.net/esdgujft/

Edit: This appears only in Firefox browser-

Upvotes: 2

Views: 618

Answers (2)

Xyz
Xyz

Reputation: 6013

Styling options in selects is still not widely supported in 2020. If you're lucky, you might be able to style the font, color and background color, but that's pretty much it.

At least today, most browsers actually paint select boxes themselves. In the dark ages of the web, most browsers used the system toolkit directly to paint these.

If you absolutely have to fix this Firefox paint issue, I would suggest building a html/javascript solution which implements a select client side. Most UI libraries have this already built in.

Otherwise, I would suggest not using select boxes if possible. It has been noted in usability studies that select boxes are more confusing for users than simple radio buttons (or check boxes for multiple-select). As a bonus effect, radio buttons grouped together inside a form field can be styled much better in browsers. You can even style them to look like a select box.

For example, this simple code will pretty much mimic a select, but with much greater stylability. Though, you'll probably want to add a few keyboard event listeners to enable keyboard navigation.

<formfield>
    <legend>Choose:</legend>
    <div class="select">
        <input type="radio" name="choice" value="choice-1" id="choice-1" checked/><label for="choice-1"  tabindex=3>Choice 1</label>
        <input type="radio" name="choice" value="choice-2" id="choice-2"><label for="choice-2" tabindex=3>Choice 2</label>
        <input type="radio" name="choice" value="choice-3" id="choice-3"><label for="choice-3" tabindex=3>Choice 3</label>
        <input type="radio" name="choice" value="choice-4" id="choice-4"><label for="choice-4" tabindex=3>Choice 4</label>
    </div>
</formfield>

<style type="text/css">
.select {
  display: flex;
  flex-direction: column;
  border: 1px solid #00000099;
  width: 200px;
}
.select label {
  padding-right: 0.5rem;
  padding-left: 0.25rem;
}
.select input[type=radio] {
  display: none;
}
.select input[type="radio"]:checked+label {
  background: lightblue;
}
</style>

But as I said earlier, it is possibly more intuitive/user friendly to just use regular radio buttons. As a general rule-of-thumb, they have better affordance than select boxes.

Upvotes: 0

user9355172
user9355172

Reputation:

You can change the style of the select, but not that of the option, because that depends on the broswer you're using.

See also: How to remove border of drop down list : CSS

This might be a solution, but it contains javascript:

https://www.w3schools.com/howto/howto_custom_select.asp

Upvotes: 1

Related Questions