Question

我需要你的帮助。

当子选择框悬停，活动或聚焦时，有没有办法更改父div的边框颜色？

<style type="text/css">

div.select select:hover,
div.select select:focus,
div.select select:active {
   background: rgb(255,255,196);
   border-color: rgb(85,85,85);
}

</style>

<div class="select" style="background: #FFF; width: 200px; border: 1px solid rgb(170,170,170);">
  <select style="width: 100%; border:0px; outline:0px; padding: 2px;">
    <option value="Sal">Sal</option>
    <option value="Awesome">Awesome!</option>
  </select>
</div>

Answer 1

我们知道there is no CSS parent selector，但如果您需要做的只是在border-color更改background（可能还有:hover），您可以使用伪元素和放大器;一些定位+ z-index黑客做到了。这是一个内联评论的例子

＆＃13;

div.select {
  height: 50px;
  background: #FFF;
  width: 200px;
  position: relative;
  /* to position the pseudo element */
  z-index: 1;
  /* HACK: to make sure it doesn't affect anything globally. */
  /* Increase this value if the element is not visible */
  /* or you have z-index set in your code */
}

.select-wrap::after {
  content: ' ';
  position: absolute;
  top: -1px;
  /* for outside border */
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: #eee;
  border: 1px solid transparent;
  pointer-events: none;
  /* to make sure hovering on the background doesn't trigger color change */
}

.select-wrap:hover::after {
  background: yellow;
  border-color: black;
}

select {
  width: 100%;
  border: 0px;
  outline: 0px;
  padding: 2px;
  position: relative;
  z-index: 10; 
  /* HACK: Can be any number more than the :after element's z-index. */
  /* As the parent has a z-index, it won't affect anything globally */
}

＆＃13;

<div class="select" style="">
  <div class='select-wrap'>
    <select>
    <option value="Sal">Sal</option>
    <option value="Awesome">Awesome!</option>
  </select>
  </div>
</div>

＆＃13;

Codepen链接：https://codepen.io/palash/pen/wpRVQV

另外，请注意pseudo elements do not work with <select>，因此需要选择＆＃39; <span>

Answer 2

另一种解决方案是使用focus-within选择器：https://css-tricks.com/almanac/selectors/f/focus-within/

当子选择被悬停，活动，聚焦时，更改父div的边框颜色

2 个答案: