Question

我的少量代码如下：

.btn(@width: 80px, @height: 36px, @radius, @font-size: 14px, @font-color, @color) {

    ...

    background-color: @color;
    &:focus, &:active {
        background-color: darken(@color, 10%);
        outline: none;
    }
}
.btn {
    .btn(5.8rem, 2.6rem, 0.5rem, 1.2rem, #fff, @c-blue);
}
.btn.disabled {
    background-color: @c-gray;
    &:focus, &:active {
        background-color: @c-gray;
    }
}

当我使用<button class='btn'>button</button>时，它会按预期运行。但是，如果我使用<button class='btn disabled'>button</button>，当我点击该按钮时，它仍然会更改background-color。

太奇怪了！它只会在我使用移动仿真时发生。

浏览器为"Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/37.0.2062.120 Chrome/37.0.2062.120 Safari/537.36"。

模拟时，"Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X; en-us) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53"。

编译的CSS：

.btn {
    display: inline-block;
    width: 5.8rem;
    height: 2.6rem;
    line-height: 2.6rem;
    font-size: 1.2rem;
    color: #fff;
    text-align: center;
    background-color: #4099de;
    border-radius: .5rem;
    border: none;
    cursor: pointer
}
.btn:focus, .btn:active {
    background-color: #2380c8;
    outline: none
}
.btn.disabled {
    background-color: #9ba6ae
}
.btn.disabled:focus, .btn.disabled:active {
    background-color: #9ba6ae
}

Answer 1

使用：

.btn {
    -webkit-tap-highlight-color: rgba(0,0,0,0);    
}

Answer 2

尝试设置（<button class="btn" disabled="disabled">）和样式按钮＆＃39; disabled状态，如下所示：

.btn[disabled] { background-color: #9ba6ae; }

它现在应该不受用户的活动的影响，并根据您的需要进行样式设置。 ..关于样式禁用表格元素here的更多信息。

为什么按钮仍然改变它的背景颜色，即使我设置它：焦点：活动风格？

2 个答案: