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;
    }
</style>
<option value="inches">in<span>2</sup></span>

Thoughts on how this can be done?

2 answers

4
points
This was chosen as the best answer

Try using Character entities...

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

will give you:

in²

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

Answered over 6 years ago by Tony Crockford
  • That's exactly what I needed. Thank you. John Conde over 6 years ago
1
point

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

Try:

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

From CSS Creator.

Answered over 6 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 over 6 years ago