0

I see a extra dotted line for input select on focus in firefox not for other browsers, just wondering is there any quick work around for it? attached screenshot below, it usually goes away after licking other places in browser.

input select glitch

realnumber
  • 2,124
  • 5
  • 25
  • 33
  • Try CSS for `select:focus` or `option:focus`. – Barmar May 18 '15 at 17:58
  • 1
    People navigating your site with the keyboard will need some indicator that the select dropdown got the focus so if you do figure out how to remove it, you should still add some visual indication when it gets focus. – BSMP May 18 '15 at 18:04
  • @mplungjan - Doesn't seem to work with the select tag. – BSMP May 18 '15 at 18:05
  • Probably the [`outline`](https://developer.mozilla.org/en-US/docs/Web/CSS/outline) property. – GreyRoofPigeon May 18 '15 at 18:10
  • @Barmar, that would select the entire select box. And there is nothing around the select when I made one in firefox. [fiddle](http://jsfiddle.net/yak613/ecz5m8jj/) – yaakov May 18 '15 at 18:10
  • You'll probably want [Fleshgrinder's answer](http://stackoverflow.com/a/18853002/4076315) instead of the currently accepted one. – BSMP May 18 '15 at 18:21

1 Answers1

0

You could try this (hack) (based on this answer: https://stackoverflow.com/a/11603104/1236396)

select {
  color: #000;
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

or this one (based on this answer: https://stackoverflow.com/a/18853002/1236396)

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}
Community
  • 1
  • 1
Koen Peters
  • 12,798
  • 6
  • 36
  • 59