CSS: option did not get style on PC, why?
Hello,
Why option did get only the font styles, and nothing else?
https://codepen.io/lanszelot/pen/BaboBxB
On tablet and phone get all the styles, only PC did not.
I do not understand why.
33 Replies
There is only option elements showing. Select is the parent element, so it’s font properties are inherited to its children, option. You have the same font size and font weight on both select and option , which is unnecessary. Option(s) get those properties inherited.
What else are you expecting to see on the page ?
form ui elements work different on different browsers. unfortunately there is no uniform way to style them all in the same way and not everything is stylable. If you want full control, you'll have to create them from scratch
for example, these are the only styles you can apply to the options for chromium browers (such as chrome and edge)
https://blogs.windows.com/msedgedev/2022/05/05/styling-select-elements-for-real/
Thank you so much
they are working on a <selectmenu> element which you have more control of, but it's unknown when that's ready for production
https://open-ui.org/prototypes/selectmenu/
But same browser, in mobile or tablet why working well?
there is still a difference in os, which can slighty differ
same os
not same os. one is desktop, one is mobile
F12 in chrome browser, and change to mobile view or tablet
it is working well, but when I change PC view it is not working
second one is PC view, the first one is tablet
same OS same browser, same everything, only F12
not sure about that. i think it is trying to emulate the mobile select ui (which is outside of the browser window)
check on a phone or tablet to see the real result
I found this, here is working well same as I did but mine not working:
W3Schools online HTML editor
The W3Schools online code editor allows you to edit code and view the result in your browser
same browser, mine not working, W3 working
that is not a <select> element with <options>.
that select is set to display none, and a custom build one takes it over
it is not inherit the properties. You could delete those lines from my codepen, and you can see it is not working.
Select is an options parent. It inherits its font values from it. You can’t style the drop-down in most browsers, but if you choose any option as the shown value when the drop-down closes , it’s inherited.
Like here I’ve only applied a font-size to the select and if you choose any one of the options, that font size is inherited.
https://codepen.io/Miss-Fox/pen/mdoePvY
yes, you have right. it is confused me, because there is the options ones too
So no reason to put the same font styles on the option selector
please use mine, and you will see, that is not working
here, I commented those, and not inherit
it is not bold
Different browsers are going to handle form elements differently as Mark said. This is what I see on mobile , iPhone (don’t know what iOS version right now but latest probably) and chrome
I see bold on my side. Idk what font family you’re using but you could try to declare
font-weight:700; sometimes it’ll skip to the next weight and if that weight isn’t defined in the font family it won’t look bold so you explicitly set your headings and strong tags to font-weight:700;Dont focus to much on styling for phone and tablet. The phone ui will take it over anyway. Here in chrome on android.
here is on the PC
I cannot wait for the selectmenu element
On someone else’s PC it won’t look like that. If you are really concerned about it create your own custom drop-down element
yea, but apparenty you can already test it with flags, but not sure if also on phone
But for it to be supported and be able to use in production !
will look into it soon. not sure how the phone ui's will handle it
on phone there is "desktop mode" it have to work like pc
in Chrome, right top 3 dots
dropdown menu -> Desktop site :tick on
again, if you want consistant beheaviour, you'll need to build it yourself from scratch (like w3schools did)
yes, thank you.
Yes but it still has to take everything into account. Just like your dev tools responsive mode doesn’t simulate an actual phone environment , desktop mode doesn’t simulate an actual PC environment