Question

我使用了SO问题Gray out image with CSS?和 Disable link using css构造一个css包装器，它会使按钮变灰，并且还会阻止对它的点击。我首先在一个单独的css文件中尝试过，但是这个例子使用了内联css样式并给出了相同的结果。这是4个按钮：

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

    <form>
        <span style="opacity:0.4; pointer-events: none;">
            <input type='submit' value='Span Inside' />
        </span>
    </form>

    <form>
        <div  style="opacity:0.4; pointer-events: none;">
            <input type='submit' value='Div Inside' />
        </div>
    </form>

    <div  style="opacity:0.4; pointer-events: none;">
        <form>
            <input type='submit' value='Div Outside' />
        </form>
    </div>

    <span style="opacity:0.4; pointer-events: none;">
        <form>
            <input type='submit' value='Span Outside' />
        </form>
    </span>

</body>
</html>

此示例中的所有四个按钮都不响应任何Firefox 15.0.1，Safari 6.0或Chrome 21.0.1180.89中的点击，这正是我的预期。

在Firefox中，所有4个按钮都显示为灰色，不透明度为0.4，这正是我所期望的。

在Safari和Chrome中，前3个按钮显示为灰色，但第4个按钮（表单元素外部的span元素）的不透明度为1.0。

浏览器中是否有错误，或者我的理解中是否有错误？

Answer 1

如果您尝试停用表单上的输入字段或按钮，那么您应该使用the disabled attribute

表单按钮的div和span css样式

1 个答案: