CSS元素的样式失败once float：right被添加到div

The following CSS element from this answer works ok in this JS fiddle example, however once I place the elements in my website, the standard drop down arrow becomes visible again due to my div having a float:right.

这个答案中的以下CSS元素在这个JS小提琴示例中运行正常，但是一旦我将元素放在我的网站中，标准下拉箭头再次可见，因为我的div有一个浮点数：右。

So: No float:right: Everything works, except that my div is in the wrong location.

所以：没有浮动：正确：一切正常，除了我的div在错误的位置。

Add float:right: Drop down becomes visible again, but then my div is in the correct location.

添加浮动：右：下拉再次可见，但然后我的div位于正确的位置。

Sort of: Can't have your cake and eat it.

排序：不能吃你的蛋糕。

Browser: Firefox, latest.

浏览器：Firefox，最新。

Using this, I created a new fiddle with the issue:

使用这个，我创造了一个问题的新小提琴：

<form id="bookingForm">
    <div class="col-md-6" style="float:right">
        Not working due to float:right
        <div class="input-group">
            <select style="width:200px;" class="form-control">
                <option>
                    hr
                </option>
            </select>
        </div>
    </div>
    <div class="col-md-6">
        Working but not in the right place (no float:right)<br/>
        <div class="input-group">
            <select style="width:200px;" class="form-control">
                <option>
                    hr
                </option>
            </select>
        </div>
    </div>
</form>

and the CSS

和CSS

.input-group {
    width:100%;
    display: inline-block;
}

.input-group select {
    padding: 0% 20% 0% 20%;

    -webkit-appearance:none;
    border: 1px solid #cccccc;
    -webkit-border-radius: 4px;
    border-radius: 20px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    height: 30px;

    background: url(data:image/png;base64,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) no-repeat right 0% bottom 0% #ffffff;    

}

For the https://jsfiddle.net/norbertnobel/jtx52dd7/

对于https://jsfiddle.net/norbertnobel/jtx52dd7/

2 个解决方案

#1

(This answer is based on the latest version of FF)

（这个答案是基于最新版本的FF）

---

Explanation:

The root of the problem is the percentage based padding on the left/right of the select element.

问题的根源是select元素左/右的填充百分比。

When the parent element is floated, it basically has a "shrink-to-fit" based width which is reducing the width of the element in your case. Since the percentage based padding on the select element is calculated relative to the parent element's width, the amount of padding differs between both of the elements in your example.

当父元素浮动时，它基本上具有“收缩到适合”的宽度，这会减小您的情况下元素的宽度。由于select元素上基于百分比的填充是相对于父元素的宽度计算的，因此填充量在示例中的两个元素之间不同。

Here is a visual demonstrating how the amount of padding controls whether or not the dropdown arrow appears:

下面是一个视觉演示，显示填充量如何控制是否显示下拉箭头：

This element's parent is floated:

这个元素的父元素是浮动的：

This select element's parent is not floated:

此select元素的父元素未浮动：

In other words, the floated element has less padding because its parent element's width is smaller.

换句话说，浮动元素具有较少的填充，因为其父元素的宽度较小。

As you can see, the default arrow is not appearing if the amount of padding exceeds the width of the select element itself. This essentially explains why floating the element causes these visual differences.

如您所见，如果填充量超过select元素本身的宽度，则不会出现默认箭头。这基本上解释了为什么浮动元素会导致这些视觉差异。

---

Potential solution:

When it comes down to it, you are basically just trying to remove the default dropdown arrow, regardless of the width/padding of the elements. In the latest version of Firefox (v35), you can now simply remove the arrow using -moz-appearance: none:

当它归结为它时，你基本上只是试图删除默认的下拉箭头，无论元素的宽度/填充。在最新版本的Firefox（v35）中，您现在可以使用-moz-appearance：none删除箭头：

Updated Example

更新的示例

.input-group select {
    padding: 0% 20% 0% 20%;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid #cccccc;
    border-radius: 20px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 30px;
    background: url(...);
}

#2

It seems like it's your padding that's at fault:

看起来这是你的填充错误：

https://jsfiddle.net/jtx52dd7/2/

https://jsfiddle.net/jtx52dd7/2/

It works better with this:

它的效果更好：

.input-group select {
    padding: 0 10px;
}