Padding option css

Your select boxes can be an incredibly functional element on your website. Here's how to style it to match the rest of your website's branding elements.

Default select boxes are pretty minimal. They can be one of the most functional parts of a website. Select boxes give your website visitors a better way to narrow down large quantities of information and direct them to where they need to go. 

Styling select boxes to match your brand is one of those details that creates a comprehensive look. However, select boxes are notoriously difficult to style. This tutorial gives you some easy ways to update your select box's look -- even if it's something as simple as ensuring the accent colors of the select box blend with the color scheme used throughout the brand.

Here's how to style your select boxes to fit with your website's overall theming and brand aesthetic.

HTML

Select boxes are quite hard to style, so some extra HTML is needed including wrapping everything in a "group" class so that we have elements to target with CSS:

CSS

The CSS works by using the before and after pseudo classes to create custom elements. The after class, in particular, is how we're able to styling the dropdown arrow:

Want to see how it all looks before committing to its use? Check out the JSFiddle below. Hover over the background images to see the hover effect. Be sure to scale your browser windows to various sizes to see how these sections would look on mobile display.

I cant find via Inspect how to increase the spacing between the listed option under a dropdown box filed.  Thanks!

Link to comment

Share on other sites

AtayBalunbalunan

Posted September 27, 2020

AtayBalunbalunan

• 

• Caspio Guru
• • 220

• • Report
  • Share

Posted September 27, 2020

From https://stackoverflow.com/questions/12301729/styling-for-option-values-in-a-html-select-drop-down-doesnt-work-in-chrome-sa

I had to make “fat” dropdowns (selects) to match some artíst’s photoshop (I swear these people need to go back to print and stay there) with their own special arrow and everything.

So, actually, this could be a Javascript question: Dan Grossman claimed once that you could make the controls look whatever way you wanted to with Javascript. I’ve never seen this myself, but then that’s likely because of how I surf. : )

I did end up making the font-size, line-height and top-bottom padding larger, but I couldn’t do too much with the padding due to the arrows not expanding with the select.

Note: Padding creates extra space within an element. In contrast, margin creates extra space around an element.

/* Apply to all four sides */
padding: 1em;

/* top and bottom | left and right */
padding: 5% 10%;

/* top | left and right | bottom */
padding: 1em 2em 2em;

/* top | right | bottom | left */
padding: 5px 1em 0 2em;

/* Global values */
padding: inherit;
padding: initial;
padding: revert;
padding: revert-layer;
padding: unset;

padding = 
  <'padding-top'>{1,4}  

padding = 
  <'padding-top'>{1,4}  

padding = 
  <'padding-top'>{1,4}  

padding = 
  <'padding-top'>{1,4}  

padding = 
  <'padding-top'>{1,4}