Select selected and other options display differently?

Question

My code is short:

select {
    font-size:1.2em !important;
    padding:4px;
    color:#555;
    margin-left:5px;
}

<select name="loc" id="loc_login">
    <option value="1" selected="selected">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

The problem is that font in non-selected options, (2 and 3) is much smaller than in selected option. That is shown on some computers I've used for test (in Firefox only). All computers with the problem are running under Windows 7, but a few different (50+) versions of Firefox. I have tried on some more Win7 computers, with same Firefox version, but all fonts are same size.

I have even put this code on another page, where it was the only thing in the body tag and the only style defined, with the same result. Also, I've tried changing the default font in the browser, which didn't work either. When I remove the CSS for the select, all fonts are small and same size.

The goal is that all of them should be 1.2em. Any ideas ?

Maybe this will help ► [font-size-issues-comparing-chrome-and-firefox](http://stackoverflow.com/questions/4899792/font-size-issues-comparing-chrome-and-firefox) — Nope, Jan 19 '17 at 15:53
Possible duplicate of [Font-size issues comparing chrome and Firefox](http://stackoverflow.com/questions/4899792/font-size-issues-comparing-chrome-and-firefox) — undefined, Jan 19 '17 at 16:30
Sadly, nothing helped. Computers that shows fonts of same size still do, and those which show options with smaller fonts still do. — Aleks, Jan 20 '17 at 11:39
here's the printscreen https://s24.postimg.org/ulit0bzmt/example.png left - as it should be, right - as it is seen on some computers. — Aleks, Jan 20 '17 at 11:49

undefined · Answer 1 · 2017-01-24T20:03:58.077

0

All seems working fine on:
Win7 - Chrome Arch Linux - Firefox (latest)
But if you are sure it is not, you can try the following CSS code:

select {
    font-size: 1.2em !important;
    padding: 4px;
    color: #555;
    margin-left: 5px;
}

edited Jan 24 '17 at 20:03

answered Jan 19 '17 at 16:10

undefined

1,019
12
24

i tried, there is difference on either side - on some computers fonts are still the same size, on others still different size. – Aleks Jan 20 '17 at 12:00
@Aleks Not working even with the !important at the end of the line? If so, you can try this: ` – undefined Jan 20 '17 at 12:24
no, stil the same. Only the 1st one changes size when i change it. All other options have same, smaller font size and size doesn't change for them. It is irrelevant if i declare size in em or px. It is not in collision with some other style. This has the totaly same result `` – Aleks Jan 20 '17 at 15:06
@Aleks try putting the `style="..."` to each ` – undefined Jan 21 '17 at 07:47
i've tried that, but that doesn't work on any computer. – Aleks Jan 23 '17 at 08:12
I think this is a case of User Agent Style Sheet... (The default css) – undefined Jan 23 '17 at 17:15
no, i've tried that, too. Beaviour is the same no matter what is the size of default font. In "affected" computers, it changes the size of selected option only. It doesn't change the size of other options. – Aleks Jan 24 '17 at 19:38
So then... I have just no idea what's going on. If you have the page published, can you share it, because maybe something of your other scipts or style sheets makes conflict. I recommend you to run several tests with a browser console opened, and briefly check all proccesses and what other CSSes or JavaScripts are doing. Other option is that the OS may have caused lag or something with the video card... Just I have no idea what could cause this. – undefined Jan 24 '17 at 20:02
It's on sites in intranet, so i don't have it published on the web. A gentle reminder - i tried just that part of code (selector with option and one css style) and it keeps happening. So, it isn't a conflict with other css styles. As you, i'm totally out of ideas. Tnx for your help. – Aleks Jan 27 '17 at 08:30

Select selected and other options display differently?

1 Answers1