Как добавить цвет восклицательному знаку?

Question

У меня в разметке стоит восклицательный знак. Он отображается нормально, но я хочу, чтобы он был красного цвета. Однако вместо этого он отображается серым, как показано здесь:

Мой код:

html += 
  '<td class="font-size-md">' +
    '<div class="custom-control custom-checkbox" style="padding-left: 2.5rem;">' +
      '<input type="checkbox" class="custom-control-input" id="xxx_' + obj.xid + '" name="xxx' + obj.xid + '" ' + attributes + '>' +
      '<label for="xxx' + obj.xid + '" class="custom-control-label">' +
        '<span background-color:#113797>&#33;</span>' +
      '</label>' +
    '</div>' +
  '</td>';

Соответствующая часть кода находится здесь:

<span background-color:#113797>&#33;</span>

Почему не установлен красный цвет?

Answer 1

Это сделает ваш "!" красный. Я добавил style="color:red" к вашему <span>. Если вы хотите изменить фон, используйте вместо него style="background-color:red". (Вы также можете использовать цветовой код вместо красного. Я использовал его здесь, чтобы легко увидеть)

<td class="font-size-md">
  <div class="custom-control custom-checkbox" style="padding-left: 2.5rem;"><input type="checkbox" class="custom-control-input" id="xxx_' + obj.xid + '" name="xxx' + obj.xid + '" ' + attributes + '><label for="xxx' + obj.xid + '" class="custom-control-label"><span style = "color:red">&#33;</span></label></div>
</td>

Answer 2

Вы пытаетесь установить свойство CSS. В html эти свойства доступны через атрибут style элементов (среди других путей). Итак, ваша разметка должна выглядеть так:

<span style="background-color:#113797;">&#33;</span>

Вы устанавливаете, ну, цвет фона для поля, в котором отображается глиф восклицательного знака. Если вы используете sh, чтобы установить цвет восклицательного знака, используйте вместо него свойство CSS color.

Еще одна особенность: вы используете не красный цвет, а оттенок синего. Обратите внимание на следующий встроенный код

<span style="background-color: red;">&#33;</span>
<span style="color: red;">&#33;</span>

<span style="background-color: #113797;">!</span>
<span style="color: #113797;">!</span>