[英]Submit button doesn't fil full width of list item in FF
Here is a JSFiddle link to some code: http://jsfiddle.net/8dtbexy3/1/ 这是一些代码的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>
What I'm trying to do - is to create a dropdown list of items, where each of item supposed to be submit button. 我正在尝试做的-创建一个项目下拉列表,其中每个项目都应该是“提交”按钮。 I've cut the piece of code just to illustrate the problem. 我剪切了一段代码只是为了说明问题。
The problem - in FIREFOX submit button doesn't fit 100% width of list item, so when you will mouse hover on it - only part of it became grey... 问题-FIREFOX中的“提交”按钮不适合列表项目的100%宽度,因此当您将鼠标悬停在其上时-仅其中一部分变为灰色...
Any ideas how to fix this with ONLY CSS changing? 有什么想法可以通过更改CSS来解决此问题吗?
Thanks. 谢谢。
Why don't you apply a css rule to the li:hover element instead of the input? 为什么不对li:hover元素而不是输入应用css规则?
.buttons-dropdown .buttons-dropdown-list li:hover {
background: #e8e7e5;
cursor: pointer;
}
UPDATE: 更新:
change the :hover rule to: 将:hover规则更改为:
.buttons-dropdown .buttons-dropdown-list li:not(.disabled):hover {
background: #e8e7e5;
cursor: pointer;
}
and in the li element add the disabled class to it: 并在li元素中添加禁用的类:
<li class="disabled"><input disabled="disabled" value="Upload Media Zip" formaction="uploadMediaZip" type="submit"></li>
How does it sound to you? 听起来怎么样?
In my opinion @Bonomi's answer is good for your situation. 我认为@Bonomi的回答适合您的情况。
/* Target li not input element */
.buttons-dropdown .buttons-dropdown-list li:hover {
background: #e8e7e5;
cursor: pointer;
}
But I saw your comment under his answer that you said I wouldn't know if the input is enable or not. 但是我在他的回答下看到了您的评论,您说我不知道输入是否启用。 For this purpose you can use this tricks. 为此,您可以使用此技巧。
Trick #1 : Consider an enabled
class for all li
elements which have an enabled input
element. 技巧1 :为所有具有启用的input
元素的li
元素考虑一个enabled
类。
Trick #2: Use jQuery :has()
selector. 技巧2:使用jQuery :has()
选择器。 In your case you probably need something like this: 在您的情况下,您可能需要这样的东西:
$('li:has(input:not([disabled="disabled"]))').hover(function() {
// Apply hover styles on the li element
},
function() {
// Clear hover style on the li element
});
And suppose you want to obtain a reference to the hovered input in your JS codes, For this you can try this code: 并假设您想在JS代码中获得对悬停输入的引用,为此,您可以尝试以下代码:
$('li:hover input').someMetod();
UPDATE #1 更新1
:has()
selector is a jQuery extension and not part of the CSS specification. :has()
选择器是jQuery扩展,不属于CSS规范的一部分。 Docs 文件
Just adding fixed CSS width (or min-width) to container solved the problem. 只需在容器中添加固定的CSS宽度(或最小宽度)即可解决此问题。
.buttons-dropdown .buttons-dropdown-list.expanded {
width: 400px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.