Styling superscript element within HTML select option

css, html, interface, mobile

Solution

There's no way to make a `&reg; ®` superscript inside an `<option> tag`. You're stuck with a regular ® `&reg;`

you can use some superscript `alphabets` `numbers` etc. in `<option>` tag looks like below code

<select>
    <option>24&#x1D57;&#x02B0;</option>
</select>

It's `answer` is 24ᵗʰ . In Unicode `MODIFIER LETTER SMALL t` is `&#x1D57;` and `MODIFIER LETTER SMALL h` is `&#x02B0;`

for complete unicode list visit this site http://www.uni-graz.at/~vollmanr/unicode/

Problem

I need to include a superscript registered trademark symbol inside an HTML `<option>` tag. In a perfect world, I would use the following markup: ``` <select> <option> My Product <sup>&reg;</sup> </option> </select> ``` However, I am designing for the iPhone Safari and Android native browsers, which ignore the `<sup>` and interpret the text within the `<option>` as plaintext. My question has two parts: - Is there a CSS "hack" that will allow me to override the native functionality of these two mobile browsers? - If a simple hack does not exist, what would be the simplest and most efficient alternative? Additional considerations that may or may not factor into the answer: - I'm developing exclusively for iPhone and Android web browsers. - Performance is very important. For this reason, I'm using Zepto.js and would prefer to stay away from jQuery and jQuery plugins.

Original source