Question

<!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或其他东西是可行的吗？

Answer 1

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

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

如果您使用的是受支持的浏览器，则此处为示例：https://codepen.io/jumprope-design/pen/LjxORX

Answer 2

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

Answer 3

此代码用作练习~~，但可能不是您应该使用的解决方案~~。依赖于legend的版本实际上似乎是可以接受的。

没有form:focus选择器，所以我认为个别input:focus可以使用伪元素创建所需的效果。但是，伪元素can only be used on elements with content，就像我要用input[type=submit]

替换button一样

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的解决方案。享受：）

Answer 4

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

考虑以下示例：

Search Form Example

当你从开发的角度来看它时，下意识就是决定为表单设置样式而不是输入元素。左边是透明输入[type = text]，右边是透明的.PNG提交按钮，你有一个看起来很清晰的搜索字段。

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

表单：焦点选择器将是处理它的完美方式。不幸的是，我们必须等到CSS4（感谢matt3141为tid-bit）。

与此同时，您可以选择一些选项

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

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

示例：http://designdisease.com/

优点：最容易设置。

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

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

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

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

优点：可以更轻松地扩展到包含多个字段的更大表单。

缺点：强化选择器可能不会像我们想的那样优雅地降级。

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

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

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

第二步：为文本字段指定宽度为100％。

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

我已经更新了o.v.的小提琴，以便采用新技术：

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

Pro's：优雅地降级，在大多数单输入字段情况下为我们提供我们想要的内容。

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

-

正如您所看到的，每个选项都有其自身的缺点 - 但如果您提前知道它们通常可以减轻它们的影响。希望这有帮助！

Answer 5

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

Answer 6

你不能＆＃34;专注＆＃34;在表格上。你只能＆＃34;专注＆＃34;使用CSS在表单内的表单元素（可编辑和启用）上。希望这会有所帮助。

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

6 个答案:

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

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

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