Using <strike> or <del> in a select box

Question

Is there anyway to strike out text in a drop down. I'm making an commerce app and looking for a way to demonstrate that an item is on sale. I'd like to do this by showing the old price and the striking this out and showing the sale price next to it.

I tried something like this

<select>
    <option value="1">Small Box 10.99</option>
    <option value="2">Large Box <del>19.99</del> 15.99</option>
</select>

Answer 1

You could use the Unicode combining character U+0336 LONG STROKE OVERLAY:

"19.99".replace(/\d/g, function (digit) { return digit + "\u0336" })

Result: 1̶9̶.9̶9̶

(It doesn’t look so good when you apply it to the period; that’s why I left that out.)

Here are all the digits with the stroke applied, if you want to just copy them into your server-side script:

0̶1̶2̶3̶4̶5̶6̶7̶8̶9̶

Answer 2

This is not possible if you're using a standard HTML select. Any markup within the <option> tag will be ignored:

<!-- The style in the span tag is completely ignored -->
<option value="1"><span syle="color:red">Small</span> Box 10.99</option>

The closest you're going to get to your desired functionality with the HTML select is by using the "disabled" property. Example:

<select>
    <option />
    <option value="1" disabled="disabled">Small Box 10.99 (Original Price)</option>
    <option value="1">Small Box 6.99 (Sale Price)</option>
</select>

Here's a working fiddle to demonstrate.

Answer 3

No. With HTML standard elements you can't have that kind of functionality. To solve that problem you have to create your own element.