I am trying to restyle my field boxes with rounded corners and some padding. Email boxes and dropdown boxes aren't changing for some reason. Is there an easy way to say all fields be styled this way?
Question
Question
Replies
Hi Chynna,
Without more information, to address the dropdown border radii I think you need to include the "select" element as well as the "input" element in your list of selectors. However the e-mail boxes are also input elements so I'm not sure why that would be unaffected.
The simple answer to your question of "all fields styled this way" would be to use the selector "input, select" e.g.:
input, select {border-radius: 10px;}
Note that the Submit button is also an input element, so if you'd like to exclude that you could try something like
input:not([type=submit]), select {border-radius: 10px;}
Hope this helps.
I am trying to make the boxes bigger as well the drop down list aren't working with the padding resize. Am I using the correct thing to size the box. When I change the padding the box gets bigger but you can't see the selection in the box. All the fields are correct just the drop down boxes.
select {padding: 20px 20px;}
I see. What would need to be done is to apply styling to the option elements as well, but this is not supported by CSS for most styles, including padding. There are various threads out there on this, here are a few. There are some solutions in those which claim to work on certain browser / OS combinations but I haven't had success so far. There's also this article which purports to work but I haven't tried myself; you could give it a shot.
You can try setting an absolute height on the select element, but I haven't had success setting an absolute width; I believe it is because of other elements containing the select element which restrict how much room we have to work with. I'll try playing with it more, unless someone else finds a good solution.
Thanks James, crazy thing is I could have swore this styling I had worked with 10.1. This is crazy. It literally changed the whole look when we upgraded.