0

Background:

I have a select which has a specified width. This width might be more narrow than some of the options inside it. What happens by default in that case is that the options render as widely as necessary, and are aligned with the left edge of the select:

enter image description here

Goal:

What I want to do is have the options aligned to the right edge of the select, as shown in my mockup below:

enter image description here

Question:

Is this possible to achieve with CSS? I've looked around and I've found a lot of answers about aligning the text inside, but it's the full option placement I want to tweak, so text-align won't work.

Community
  • 1
  • 1
Kelderic
  • 6,502
  • 8
  • 46
  • 85
  • how about using a custom select plugin ? – AhmadAssaf Sep 04 '14 at 22:01
  • I can build a custom dropdown if I have to, but it would be easier to just use a `select`. – Kelderic Sep 04 '14 at 22:03
  • i dont think its possible referring to: http://stackoverflow.com/questions/7208786/how-to-style-the-option-of-a-html-select – AhmadAssaf Sep 04 '14 at 22:12
  • The functionality and rendering of many form components depend on default browser built-in features that are difficult and, some, impossible to alter. Go for a plugin/widget that basically will mimic this behavior using a div-span layout. Consider CSS frameworks for the job. – Oriol Sep 04 '14 at 22:45

1 Answers1

0

After further research and reading the comments on this question, I have arrived at the conclusion that this cannot be done. The alignment cannot be changed, in any browser.

My workaround was to add a button beside the input, and style the two to look very similar. I used JS to power it, but I've been reading about the checkbox hack, so it could be done with no JS.

enter image description here

Kelderic
  • 6,502
  • 8
  • 46
  • 85