提交按鈕不FIL列表項目的整個寬度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寬度（或最小寬度）到容器解決了這個問題。

.buttons-dropdown .buttons-dropdown-list.expanded { 
     width: 400px; 
} 

Answer 2

你爲什麼不應用CSS規則李：懸停元素，而不是輸入的？

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

UPDATE：

變化：懸停規則：

.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> 

它是怎樣的聲音給你？

Answer 3

在我看來@博諾米的回答是好您的具體情況。

/* Target li not input element */ 
.buttons-dropdown .buttons-dropdown-list li:hover { 
    background: #e8e7e5; 
    cursor: pointer; 
} 

但是我在他的回答下看到您的評論，您說我不知道​​輸入是否啓用。爲此目的，你可以使用這個技巧。

招數＃1：考慮一個enabled類，其具備支持input元件所有li元素。

絕招＃2：使用jQuery :has()選擇器。在你的情況，你可能需要的東西是這樣的：

$('li:has(input:not([disabled="disabled"]))').hover(function() { 
    // Apply hover styles on the li element 
}, 
function() { 
    // Clear hover style on the li element 
}); 

而且假設你想在你的JS代碼獲取到懸停輸入一個參考，對於這一點，你可以試試這個代碼：

$('li:hover input').someMetod(); 

---

UPDATE＃1

:has()選擇器是一個jQuery擴展且不CSS規範的一部分。 Docs