CSS中当子元素获得焦点时如何更改父元素样式

Question

我想在子

<div>

元素接收焦点时更改父

<input>

样式。不幸的是，下面的代码根本不起作用。请帮我看看该怎么做？

#email {
    opacity: 0.3;
}

#exampleInputEmail1:focus < #email {
    background: #f90442;
}

<div class="form-group form-group-lg" id="email" tabindex="0">
    <label>Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>

Answer 1

不幸的是，CSS 中没有父选择器，甚至在 CSS3 中也没有。

您必须使用解决方法 – 即某种 JavaScript。

如何使用 javascript 来解决这个问题必须根据具体情况来决定。可以说，最简单、最“易于访问”的解决方案可能是使用 jQuery，并且有很多选择。

例如，您可以使用

:has()

选择器定位父包装器：

$(".form-group").has(":focus")

这将针对任何具有

class="form-group [...]"

的元素，该元素的子代中具有焦点的元素（不仅仅是作为直接子元素）。

或者您可以使用

.closest()

功能：

$(":focus").closest(".form-group") 

与类似的

.parents()

函数不同，一旦选择器匹配，

.closest()

就会停止向上遍历 DOM 树。这可能使

.closest()

成为这两者中更有效的选择。

上面的两个例子对于 DOM 结构来说都是宽松的，并且如果它发生变化也不太可能破坏。但是，如果包装元素always是

<input>

的直接父级，则可以使用

.parent()

函数（带有可选选择器）：

// Option 1: Targets the immediate parent
$("input:focus").parent()
// Option 2: Targets the immediate parent, but only if it's a div
$("input:focus").parent("div")

这 4 个选项的示例实现，通过切换包装器上的

.infocus

类（也可用作 jsfiddle）来工作：

// Adds or removes a focus class.
function updateFocus(e) {
	// Log the event to view details about it
  // console.log(e);
  
  // The "has focus" class name
  var focusClass = "infocus";
  // The wrapper element selector
  var wrapperSel = ".form-group";
  
  
  //*===========================================================
  // Option 1: has(":focus")
  // - needs only the wrapper selector
  // ===========================================================
  var wrapper = $(wrapperSel);
  // Remove the class on all
  //wrapper.each(function() { $(this).removeClass(focusClass);});
  wrapper.removeClass(focusClass);
  // Add class only to the one whose descendant has focus
  wrapper.has(":focus").addClass(focusClass);
  //*/
  
  /* ===========================================================
  // Option 2: closest()
  // - needs the event and the wrapper selector
  // ===========================================================
  if (e.type === "focus") {
  	$(e.target).closest(wrapperSel).addClass(focusClass);
  } else if (e.type === "blur") {
    $(e.target).closest(wrapperSel).removeClass(focusClass);
  }
  //*/
  
  /* ===========================================================
  // Option 3: parents()
  // - needs the event and the wrapper selector
  // ===========================================================
  if (e.type === "focus") {
  	$(e.target).parents(wrapperSel).addClass(focusClass);
  } else if (e.type === "blur") {
    $(e.target).parents(wrapperSel).removeClass(focusClass);
  }
  //*/
  
  /* ===========================================================
  // Option 4: parent()
  // - needs only the event (the wrapper selector is optional)
  // ===========================================================
  if (e.type === "focus") {
  	$(e.target).parent().addClass(focusClass);
  } else if (e.type === "blur") {
    $(e.target).parent().removeClass(focusClass);
  }
  //*/
}

// Bind the updateFocus() function above to focus/blur of form elements.
$('input, textarea, select').on("focus", function(event) {
	updateFocus(event);
}).on("blur", function(event) {
	updateFocus(event);
});

.form-group {
    opacity: 0.3;
}
.form-group.infocus {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label>Email</label>
  <input type="email" placeholder="Email">
</div>

<div class="form-group">
  <label>Name</label>
  <input type="text" placeholder="Name">
</div>

Answer 2

对此进行快速更新，这可以使用 focus-within 来完成：

/* Selects a <div> when one of its descendants is focused */
div:focus-within {
  background: cyan;
}

Answer 3

使用 jQuery。

$("#exampleInputEmail1").focus(function() {
    //change style
});

Answer 4

到目前为止，你所要求的在 CSS 中是不可能的。所以只有 选项是使用 Jquery。

如果有兴趣请继续阅读..

使用 jquery 在

on focus

元素上绑定

input

事件，在这个事件中你只需要访问

parent

并更改它的

background-color

。

有如下所示的 CSS。

.background-color-RED{
  background-color:#f90442;
}

Jquery 语法如下。

$("#exampleInputEmail1").on('focus',function() {
   $(this).parent().addClass('background-color-RED');
});

额外：如果您想在用户焦点移出输入时删除背景颜色，则可以使用

blur

事件并按如下方式处理它。

 $("#exampleInputEmail1").on('blur',function() {
    $(this).parent().removeClass('background-color-RED');
 });

Answer 5

这个问题已经过去很长时间了，但我看到仍然没有答案。你可以像这样做任何你想做的事：

#email:has(input:focus) {
 /* some style */
}

如果能帮到你我会很高兴