html - 提交按钮不填满 FF 中列表项的全宽

Question

这是一些代码的 JSFiddle 链接:http://jsfiddle.net/8dtbexy3/1/

<style>
    .buttons-dropdown {
        position: relative;
        display: inline-block;
        font-size: 1em;
    }
    .buttons-dropdown .buttons-dropdown-list.expanded {
        position: absolute;
        margin: 0 1px;
        padding: 0;
        border: 1px solid #000;
        background: #fff;
        bottom: 2.6em;
        right: -1px;
        display: block;
    }
    .buttons-dropdown .buttons-dropdown-list li {
        position: relative;
        height: 2em;
        line-height: 2em;
        margin: 0;
        border-top: 1px solid #e5e5e5;
        border-bottom: 0;
        overflow: hidden;
    }
    .buttons-dropdown .buttons-dropdown-list li input[type="submit"] {
        display: block;
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0 20px;
        text-align: left;
        background: none;
        border: 0;
        color: #000;
        outline: none;
    }
    @-moz-document url-prefix() {
        /* Fix dropdown buttons width specially for FF */
        .buttons-dropdown .buttons-dropdown-list li input[type="submit"] {
            width: auto;
        }
    }
    .buttons-dropdown .buttons-dropdown-list li input[type="submit"]:hover {
        background: #e8e7e5;
        cursor: pointer;
    }
    .buttons-dropdown .buttons-dropdown-list li input[disabled="disabled"] {
        opacity: 0.5;
    }
    .buttons-dropdown .buttons-dropdown-list li input[disabled="disabled"]:hover {
        background: none;
        cursor: default;
    }
</style>
<div style="margin:200px 300px;" class="buttons-dropdown">
    <a class="buttons-dropdown-opener">Upload</a>
    <ul class="buttons-dropdown-list expanded">
        <li><input value="Upload Product Template" formaction="upload" type="submit"></li>
        <li><input value="Upload ZIPPED Product Templates" formaction="uploadZipped" type="submit"></li>
        <li><input disabled="disabled" value="Upload Media Zip" formaction="uploadMediaZip" type="submit"></li>
        <li><input value="Talend Upload" formaction="uploadTalend" type="submit"></li>
    </ul>
</div>

我想做的是创建一个元素下拉列表，其中每个元素都应该是提交按钮。我截取了这段代码只是为了说明问题。

问题 - 在 FIREFOX 中提交按钮不适合列表项的 100% 宽度，所以当你将鼠标悬停在它上面时 - 只有一部分变成灰色......

有什么想法可以通过仅更改 CSS 来解决这个问题吗？

谢谢。

Answer 1

为什么不将 css 规则应用于 li:hover 元素而不是输入？

.buttons-dropdown .buttons-dropdown-list li:hover {
        background: #e8e7e5;
        cursor: pointer;
    }

更新:

将 :hover 规则更改为:

.buttons-dropdown .buttons-dropdown-list li:not(.disabled):hover {
        background: #e8e7e5;
        cursor: pointer;
    }

并在 li 元素中添加禁用类:

<li class="disabled"><input disabled="disabled" value="Upload Media Zip" formaction="uploadMediaZip" type="submit"></li>

你觉得怎么样？