Использование <strike>или <del>в поле выбора

Question

Есть ли способ вычеркнуть текст в выпадающем списке? Я делаю коммерческое приложение и ищу способ продемонстрировать, что товар продается. Я хотел бы сделать это, показав старую цену и вычеркнув ее, и показывая цену продажи рядом с ней.

Я пробовал что-то подобное

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

Answer 1

Вы можете использовать комбинирующий символ Unicode U + 0336 LOWG STROKE OVERLAY:

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

Результат: 1̶9̶.9̶9̶

(Это не выглядит такхорошо, когда вы применяете его к периоду, вот почему я это исключил.)

Вот все цифры с примененным штрихом, если вы хотите просто скопировать их в свой серверный скрипт:

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

Answer 2

Это невозможно, если вы используете стандартный HTML select. Любая разметка внутри тега <option> будет игнорироваться:

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

Ближайший доступ к желаемой функциональности с HTML select - использование свойства «disabled». Пример:

<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>

Вот рабочая скрипка для демонстрации.

Answer 3

Нет. Со стандартными элементами HTML у вас не может быть такой функциональности. Чтобы решить эту проблему, вы должны создать свой собственный элемент.