如何将禁用的按钮变灰

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样式 rule 后，您可以使用:disabled标志设置该属性为true时的样式。

您can not use内嵌样式中的:disabled标志。

内联样式（style='...'）将覆盖几乎所有其他CSS样式，但只能在创建元素的实例上应用于元素（在本例中为<button>）。页面加载后发生的事件不是动态的，也不是活动的。

应避免整体使用内联样式！

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>