I have a drop down that I need to have exponents in such as squares, etc. Apparently just doing:

<option value="inches">in<sup>2</sup></option>

does not work. I also tried:

<style type="text/css">
    option span {
        text-align: top;
<option value="inches">in<span>2</sup></span>

Thoughts on how this can be done?

2 answers

This was chosen as the best answer

Try using Character entities...

e.g. <option value="inches">in&#178;</option>

will give you:


see more on this cheatsheet: http://www.addedbytes.com/cheat-sheets/html-character-entities-cheat-sheet/

Answered about 7 years ago by Tony Crockford
  • That's exactly what I needed. Thank you. John Conde about 7 years ago

Try putting <sup> outside <option> instead of inside.


<style type="text/css">
   option span { 
      font-size:xx-small; vertical-align:top

From CSS Creator.

Answered about 7 years ago by Andrew Pennebaker
  • But if I put the <sup> tag outside of the <option> tag won't the entire option value become superscript? I tried that CSS, too, with no luck. It seems the <sup> tag is completely ignored. Same happens if I make a <span>. John Conde about 7 years ago