как сделать недоступную кнопку серым

Question

У меня есть следующая кнопка: -

 <button type="submit" disabled style="
    position: absolute;
    height: 40px;
    border: none;
    color: #fff;
    background: #4d9b84 ;
    padding: 0 22px;
    cursor: pointer;
    border-radius: 30px;
    top: 5px;
    right: 5px;
    font-size: 13px;
    font-weight: 500;">
                            Get My Estimate
                        </button>

в настоящее время кнопка отключена, но текст кнопки не затенен, как показано ниже: -

введите описание изображения здесь

так может кто-нибудь, как я могу отключить отключенную кнопку серым?

Answer 1

Вы должны поместить свои CSS стили в таблицу стилей , а не прямо в HTML. Как только он установлен как правило CSS стиль , вы можете использовать флаг :disabled для установки стилей, когда этот атрибут имеет значение true.

Вы не можете использовать флаг :disabled во встроенных стилях.

Встроенные стили (style='...') перезаписывают почти все остальные стили CSS, но могут применяться только к элементу (в данном случае <button>) в экземпляр элемента создан. Это не "динамическое c" или повторное включение событий, которые происходят после загрузки страницы.

В целом, следует избегать встроенных стилей!

button.standard {
   /* position: absolute;*/
    height: 40px;
    border: none;
    color: #fff;
    background: #4d9b84 ;
    padding: 0 22px;
    cursor: pointer;
    border-radius: 30px;
 /*   top: 5px;
    right: 5px;*/
    font-size: 13px;
    font-weight: 500;
}

button.standard:disabled {
    color: #666;
}

<button type="submit" disabled class="standard">Get My Disabled Estimate</button>
<BR><BR>
<button type="submit" class="standard">Get My Live Estimate</button>