使用 CSS 突出显示活动表单？答案

【问题标题】：Highlight active form with CSS?使用 CSS 突出显示活动表单？
【发布时间】：2012-06-23 02:41:26
【问题描述】：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <style>
            form:focus{
                background:red;
            }
        </style>
        <title>Home, sweet home</title>
    </head>
    <body>
        <form>
            <input type="text"/>
            <input type="submit"/>
        </form>
        <form>
            <input type="text"/>
            <input type="submit"/>
        </form>
        <form>
            <input type="text"/>
            <input type="submit"/>
        </form>
    </body>
</html>

这显然不起作用，这就是我问这个问题的原因。如果将输入作为突出显示的焦点，我如何获得具有一个的表单？也就是说，我希望能够将样式应用于活动 FORM，而不是活动 INPUT - 没有 JS 或其他东西是否可行？

【问题讨论】：

如果特定的 Inputbox 获得焦点，是否要将输入框背景颜色设置为 RED？
如果父表单的任何子输入是焦点，我希望父表单突出显示红色
这是一个大问题。如果页面中有多个表单，没有 JS，渲染器将无法链接样式表和表单。最好的方法是拥有表单名称/ID 并让 JavaScript 在表单获得焦点时应用样式表。
我不知道有什么方法可以做到这一点没有 JavaScript，但使用 JavaScript/jQuery 并不太难：jsfiddle.net/3mCwg。您只想使用 CSS 有什么特别的原因吗？
该死，我希望不会是这样 :( 但这很奇怪，因为 form:hover 和 form:active 工作（我明白为什么悬停会，但是活跃？）

标签： html css forms focus

【解决方案1】：

这是一个较老的问题，但截至目前，一些更流行的浏览器都支持名为 :focus-within 的 css 伪选择器，它可以设置具有焦点输入的表单（没有 javascript）的样式。

这里是选择器的当前支持：http://caniuse.com/#search=focus-within

如果您使用受支持的浏览器，以下是一个示例：https://codepen.io/jumprope-design/pen/LjxORX

【讨论】：

现在是全新的品牌！

【解决方案2】：

这段代码作为一个练习~~但可能不是你应该使用的解决方案~~。依赖legend 的版本实际上似乎可以接受。

没有form:focus 选择器，所以我认为个人input:focus 可以使用伪元素创建所需的效果。然而，伪元素can only be used on elements with content，就像我用button替换input[type=submit]一样

form {
    position:relative;
}
/*style the pseudo-element before a button that is a general sibling
  of any element that currently has focus within a form*/
form *:focus~button:before{
    content:"";display:block;background:red;
    /*take up the entire space of the form*/
    position:absolute;top:0;right:0;bottom:0;left:0;
    /*but render behind its children*/
    z-index:-1;
}

Fiddled，但它立刻看起来很疯狂，所以我将解决方案重构为rely onto a legend element。享受:)

【讨论】：

这很有趣，它有一些问题，但本质上用纯 CSS（和一个传说）回答了这个问题！非常有创意，非常感谢
在不提供所有 CSS3 功能的浏览器中使用通用同级选择器？
@WillD.White：兄弟选择器比伪元素有更好的支持矩阵（IE7+）
我的下意识是子选择器在 IE 中的行为往往很时髦，老实说，我以前从未见过兄弟选择器。不得不谷歌它。你是对的，尽管伪元素可能比 ~.感谢您的提示！

【解决方案3】：

CSS 中没有父选择器，因此需要 javascript。不过，CSS 4 计划获得此功能。

【讨论】：

不知道它是为 CSS4 计划的。环顾四周，发现this。谢谢你的花絮！

【解决方案4】：

我一直在寻找相同的造型技术。从 UI/UX 的角度来看 - 在某些情况下，将搜索表单简化为单个元素非常有意义。

考虑下面的例子：

当您从开发的角度处理它时，下意识地决定为表单本身而不是输入元素设置样式。左侧有一个透明的 input[type=text]，右侧有一个透明的 .PNG 提交按钮，您就有了一个清晰的搜索字段。

正如您所发现的，您放弃了与 :focus 相关的 CSS 样式功能，因为输入字段不是控制背景/颜色等的字段，而是表单元素。

form:focus 选择器将是处理该问题的完美方式。不幸的是，我们不得不等待 CSS4 来解决这个问题（感谢 matt3141 的花絮）。

与此同时，您有几个选择

选项 1 - 放弃可点击的提交按钮

如果可能，我通常会尽量避免这种情况，但您可以选择完全放弃提交按钮。按照您的意图设置文本字段的样式，并使用位置限制在字段左侧或右侧的背景图像。当用户输入他们的查询并按下回车键时，您仍然可以触发 GET 操作。上面的示例图片使用了这种技术。

例如：http://designdisease.com/

优点：最容易设置。

缺点：仍然点击搜索按钮的用户可能会感到困惑。

选项 2 - 使用备用元素设置背景样式

您的下一个选择是利用兄弟选择器和内容标签作为 o.v.在他/她之前的回答中已经如此慷慨地解释了。当 :focus 效果应用于输入字段时，此效果会添加一个新元素并将其设置为指定区域的新背景。

例如：http://jsfiddle.net/ovfiddle/PEK7h/2/

优点：可更轻松地扩展到具有多个字段的较大表单。

缺点：密集型选择器可能不会像我们希望的那样优雅地降级。

选项 3 - 使用绝对定位来堆叠元素

在文本字段将包含整个表单宽度的情况下，您可以使用 position:absolute;属性来简单地将提交按钮加载到输入元素的顶部，然后对按钮进行一些 css 调整以删除背景/边框 - 产生与我们上面的示例图像相同的效果，但增加了使其可点击的好处。

第一步：给表格一个位置 - 相对/绝对/固定。

第二步：为文本字段设置 100% 的宽度。

第三步：给按钮一个绝对位置，右边位置为0。

我已经更新了 o.v. 的小提琴以融入新技术：

例如：http://jsfiddle.net/PEK7h/17/

专业人士：优雅地降级，在大多数单输入字段情况下为我们提供我们想要的。

缺点：不像 o.v. 的修复那样容易扩展到大型表单。

--

如您所见，每个选项都有其自身的缺点 - 但如果您提前了解它们，通常可以减少它们的影响。希望这会有所帮助！

【讨论】：

感谢您的研究。我真的很喜欢您的选项 3 解决方案。它仍然可以用于更灵活的尺寸，我只需要将按钮位置的包含 div 放置到绝对位置（而不是整个表单） - 这并不理想，但在等待 CSS4 时仍然很好。跨度>
我很高兴它有帮助！我一直将它用于搜索字段，但您完全正确，因为您可以将其扩展到更大的表单，并具有一些创造性的定位。

【解决方案5】：

如果页面中有多个表单，没有JS，渲染器将无法链接样式表和表单。最好的方法是获得表单名称/ID 并让 JavaScript 在表单获得焦点时应用样式表。

【讨论】：

对不起，正在更改输入字段本身的背景颜色，我希望它为父表单更改它。
有人在问题 cmets 中发布的 jsFiddle 如果您想查看它，它会做得很好，但当然感谢您的想法:)

【解决方案6】：

您不能“专注”于表单。您只能使用 CSS“关注”表单内的表单元素（可编辑和启用）。希望这会有所帮助。

【讨论】：