0
<label for="extras">Extras</label>
<select id='extras' class="form-control form-control-sm">
    <option>None</option>
    {% for ex in extra %}
        <option>
            <span>
                <div>{{ ex.itemname }}</div>
                <div style='float: right; font-weight: bold; color:green;'>${{ ex.smallcost }</div>
            </span>
        </option>
    {% endfor %}
</select>

I have applied some styling to the cost but it is not working, you can see in the image below.

-

PSKP
  • 1,178
  • 14
  • 28
Tanish Surana
  • 117
  • 7

1 Answers1

3

This is because <option> tags cannot have any HTML markup inside them. Moreover, only a few basic CSS styles can be applied to them.

If you want to style your <option>s, your best option is creating your own custom select box. (See this answer on a similar question.)

Arjun
  • 1,261
  • 1
  • 11
  • 26