CSS for SELECT element

Question

I am currently trying to properly CSS style a SELECT element.

Specifically, what I want to do is to have the initial selected value be a bit distanced from the arrow/select/icon/whatever that opens the list of options.

Currently, it appears as: VALUE[V] where [V] is the triangle/arrow button. I want to create a spacing between the end of VALUE, whatever that comes to be, and the [V] button/part of the select element. Margin is obviously not relevant and padding takes place outside of the [V] as well.

Since I have several SELECT's - is there a 'CLEAN' or 'ELEGANT' method to do this through CSS other than individually giving a width to each of these elements?

Regards G.Campos

Ugly hack... append a   to the end of the text nodes of option elements. — alex
– alex, Commented May 23, 2011 at 1:30

Zac · Accepted Answer · 2011-05-23 01:45:12Z

1

Why cant you use padding? It seems to do what you are after.. Check this out:

http://jsfiddle.net/GYyKh/1/

answered May 23, 2011 at 1:45

Zac

12.9k21 gold badges77 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Capagris Over a year ago

Ok, so the answer is to style not SELECT but rather OPTION. I have no idea why I didn't think of that. Amateur-blues I guess. Thanks a lot for the heads up.

Matt Phillips Over a year ago

This doesn't work... Changing that padding amount does nothing to the space where the word in the option stops and the arrow for the dropdown begins

Zac Over a year ago

@Matt you are right.. it only works in firefox. Sorry Sotkra.. I will take a look again later.. when I am off the clock ;)

Matt Phillips · Accepted Answer · 2011-05-23 01:38:45Z

0

Make your select have a class so that you can call it from your css. Then do something like

.spacer {
    width:500px;
}

That will give all the elements with that class name a width that you specify

answered May 23, 2011 at 1:38

Matt Phillips

11.6k11 gold badges49 silver badges72 bronze badges

Collectives™ on Stack Overflow

CSS for SELECT element

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related