当其他元素被聚焦时CSS选择元素

Question

我有一个选择框，我将其设计为看起来像Android Spinner。请参阅fiddle。

问题在于，当聚焦选择时，我无法弄清楚如何使三角形变为蓝色。有人可以帮忙吗？

Answer 1

问题是你试图以错误的方式绕过DOM旅行。你想要一个侄子影响叔叔，你不能单独使用CSS。

但是，如果你让div.triangle成为select的兄弟，那么你的CSS就可以了。您只需要更改.triangle CSS的定位

http://jsfiddle.net/wildandjam/6DkN6/

<div class="dataInputComboboxWrap">
<div class="dataInputComboboxContainer">
    <select class="dataInputCombobox"  > 
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
        <option>Option 4</option>
    </select>
    <div class="triangle">
    </div> 
</div>

并使容器中的三角形可见：

.triangle {
    left: -50px;
}

Answer 2

在CSS中，你不能（除非三角形在select标签内，在这种情况下你可以做dataInputCombobox：focus .triange {border：1px solid;}）

虽然使用.addClass（）

，但您可以使用jQuery执行此操作