html - Remove outline from select box in FF -
is possible remove dotted line surrounding selected item in select element?
i have tried add outline
property in css did not work, @ least not in ff.
<style> select { outline:none; } </style>
update
before go ahead , remove outline, please read this.
http://www.outlinenone.com/
i found solution, mother of hacks, serve starting point other more robust solutions. downside (too big in opinion) browser doesn't support text-shadow
supports rgba
(ie 9) won't render text unless use library such modernizr (not tested, theory).
firefox uses text color determine color of dotted border. if do...
select { color: rgba(0,0,0,0); }
firefox render dotted border transparent. of course text transparent too! must somehow display text. text-shadow
comes rescue:
select { color: rgba(0,0,0,0); text-shadow: 0 0 0 #000; }
we put text shadow no offset , no blur, replaces text. of course older browser don't understand of this, must provide fallback color:
select { color: #000; color: rgba(0,0,0,0); text-shadow: 0 0 0 #000; }
this when ie9 comes play: supports rgba
not text-shadow, apparently empty select box. version of modernizr text-shadow
detection , do...
.no-textshadow select { color: #000; }
enjoy.
Comments
Post a Comment