是否可以更改输入上字段集的背景颜色：焦点？

发布于 2024-12-23 15:03:04 字数 176 浏览 1 评论 0原文

当光标位于该字段集的任何文本字段内时，是否可以更改表单字段集的背景颜色？

我以为这可能有效，但事实并非如此：

fieldset {background: #ffe;}
input[type=text]:focus+fieldset {background: #ff0;}

原文

Is it possible to have the background-color of a form's fieldset change when the cursor is inside any of that fieldset's text fields?

I assumed this might work, but it doesn't:

fieldset {background: #ffe;}
input[type=text]:focus+fieldset {background: #ff0;}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小镇女孩 2024-12-30 15:03:04

您无法根据其子input之一的焦点状态来设置fieldset的样式。

但是，您可以通过添加一个空的 div 作为 fieldset 的最后一个子元素并设置其样式来模拟效果。然后可以使用焦点输入上的通用同级选择器来更改此 div 的样式：

fieldset {
  border: none;
  position: relative;
  margin-bottom: 0.5em;
}

legend {
  position: relative;
  background: white;
}

input:focus {
  background: lightyellow;
}

input:focus ~ div {
  border: 2px solid black;
  background: #def;
}

fieldset > div {
  height: calc(100% - 0.5em);
  width: 100%;
  position: absolute;
  top: 0.5em;
  left: 0;
  border: 2px solid lightgray;
  z-index: -1;
}

<fieldset>
  <legend>Fieldset 1</legend>
  <input name="text1" type="text" />
  <input name="text2" type="text" />
  <div></div>
</fieldset>
<fieldset>
  <legend>Fieldset 2</legend>
  <input name="text3" type="text" />
  <input name="text4" type="text" />
  <div></div>
</fieldset>

You can't style a fieldset based on the focus state of one of its children inputs.

However, you can simulate the effect by adding an empty div as the last child of the fieldset, and styling it. This div's styles can then be changed using the general sibling selector on the focused input:

fieldset {
  border: none;
  position: relative;
  margin-bottom: 0.5em;
}

legend {
  position: relative;
  background: white;
}

input:focus {
  background: lightyellow;
}

input:focus ~ div {
  border: 2px solid black;
  background: #def;
}

fieldset > div {
  height: calc(100% - 0.5em);
  width: 100%;
  position: absolute;
  top: 0.5em;
  left: 0;
  border: 2px solid lightgray;
  z-index: -1;
}

<fieldset>
  <legend>Fieldset 1</legend>
  <input name="text1" type="text" />
  <input name="text2" type="text" />
  <div></div>
</fieldset>
<fieldset>
  <legend>Fieldset 2</legend>
  <input name="text3" type="text" />
  <input name="text4" type="text" />
  <div></div>
</fieldset>

回复收藏 0 原文

手长情犹 2024-12-30 15:03:04

现在可以使用 :focus-within

:focus-within CSS 伪类表示已接收焦点的元素或包含已接收焦点的元素。换句话说，它表示一个本身与 :focus 伪类匹配的元素，或者具有与 :focus 匹配的后代元素。（这包括影子树的后代。）
MDN

fieldset {
  background: green;
  margin: 1em;
}

fieldset:focus-within {
  background: red;
}

<fieldset>
  <input>
</fieldset>

This is now possible with :focus-within

The :focus-within CSS pseudo-class represents an element that has received focus or contains an element that has received focus. In other words, it represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus. (This includes descendants in shadow trees.)
MDN

fieldset {
  background: green;
  margin: 1em;
}

fieldset:focus-within {
  background: red;
}

<fieldset>
  <input>
</fieldset>

回复收藏 0 原文

巷子口的你 2024-12-30 15:03:04

恐怕这对于 CSS 来说是不可能的，因为 CSS 没有可以根据元素的子元素进行选择的选择器。您尝试中的选择器 input[type=text]:focus+fieldset 与紧随聚焦文本输入框的 fieldset 元素相匹配 - 某些内容与你想要的完全不同。

然而，使用 JavaScript 可以并且相当容易地处理这个问题。您只需要在字段集中的字段上使用 onfocus 和 onblur 事件处理程序，并且这些处理程序对于所有这些处理程序来说可以是相同的函数；他们只需更改 fieldset 元素的 style.background 属性，

回复收藏 0 原文

一影成城 2024-12-30 15:03:04

如果您出于可访问性原因不使用字段集，则只需执行以下操作：

http:// /www.pmob.co.uk/temp/categorybox.htm

如果您需要它用于边框和可访问性，请考虑将字段集包装在 div 中，然后对包含 div 而不是字段集的样式进行样式化。

希望这有帮助！

马特

回复收藏 0 原文

蓦然回首 2024-12-30 15:03:04

如果您使用 Jquery，并且没有嵌套字段集，则可以执行简单的绑定，将其自身附加到字段集中的所有页面控件，并且每当您聚焦/取消聚焦任何这些控件时，都会添加/删除一个类来自包含控件的字段集。

这是一个示例：

<代码>
$('输入、标签、选择、选项、按钮', '字段集').each(function (index, item) {
$(this).focus(function () { $(this).closest('fieldset').addClass('fieldsetFocus'); });
$(this).blur(function () { $(this).closest('fieldset').removeClass('fieldsetFocus'); });
});