I get unexpected results when retrieving the width via javascript under different circumstances.

When the select is visible the with is 298px.

When the select is display:none, the width is also 298px (ff,
jquery)

When the select is in a div with display:none, the width is correct
300px.

(The result is also the same assigning: box-sizing: border-box)

Well, the retrieved width sometimes differs from the used browser and javascript framework, but all in all I just want to be able to retrieve the assigned width (300px).
(I guess it has to something to do with the "formal weirdness" stated here: http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/, but why won't the browsers use the width assigned by the user??)

How can I retrieve the assigned width? Is there actually way to do it?

Actually it is the borders that is causing you the trouble. Set the border-width to 0 and you will be able to see 300px for everybody. Actually the browsers are setting the element's width to 300px as you are expecting it to be, and adding the borders around. For visible elements you can get the entire width of the element by using offsetWidth (which will be set to 0 if you set the display to none.)

When a specified value is computed, it will adjust according to the situation (in your fiddle, borders). This is why the width differs. I don't know why the select hidden within a parent div doesn't adjust to borders, though.

Solution 1: Perhaps a better way than do get the specified value of the element is to look for the width of its parent? Seeing how it's a good practice never to set widths on specific elements anyway (but rather on their parents, such as when using a grid system or similar), this may be your approach. Using widths on parents effectively restrict the max width of its children.

Solution 2: Now, if you really do want the specified value, I suppose you could go through document.styleSheets and for every stylesheet, access the cssRules property and work your way down until you've found the value you're looking for. When I tried this in Chrome, cssRules appears to be empty, but Firefox populates it and obediently lists all styles in every stylesheet attached to the page.

I don't recommend it, but if you decide to go down that hole, you may be interested in either of these SO questions:

I don't recommend changing the box-sizing either since this will give you the value you are looking for, but the actual width of the element will be wider (base width 300px + borders = 302px wide).

If none of these floats your boat, perhaps its time to sit back and think about (and explain!) what you want to do and why. Whenever I find myself wanting to do non-standard stuff for simple tasks, it's not seldom because my solution is perhaps not optimal and I need to zoom out a bit before proceeding.