Question

I'm using DropKick to style a select field. I need to seperate the text in the option, so that one word is floated right.

I tried this, but my span is stripped away:

<select>
    <option>opt1</option>
    <option>opt2</option>
    <option>opt3<div class="right">I need to be to the right</div></option>
</select>

What can I do to target certain part of an option using DropKick?

Was it helpful?

Solution

  <select>
    <option>opt1</option>
    <option style="text-align: right;">opt2</option>
    <option>opt3<div class="right">I need to be to the right</div></option>
  </select>

By using the CSS text-align: right;

this what you mean?

Ugly alternative:

  <select>
    <option>opt1</option>
    <option>opt2</option>
    <option style="text-align: right;">Foo&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Bar&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
  </select>

It will "more or less" make the letters in-between space bla ect, not even sure what to call this. :)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top