You are viewing limited content. For full access, please sign in.

Question

Question

Style all the fields with same box type

asked on March 27, 2017

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?

0 0

Replies

replied on March 27, 2017

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.

1 0
replied on March 28, 2017

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;}

 

0 0
replied on March 28, 2017

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.

0 0
replied on March 28, 2017

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.

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.