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

4

6 回答 6

9

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

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

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

于 2017-08-06T18:41:42.780 回答
3

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

没有form:focus选择器，所以我认为个人input:focus可以使用伪元素创建所需的效果。但是，伪元素只能用于具有 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，但它立即看起来很疯狂，所以我重构了解决方案以依赖legendelement。享受 ：）

于 2012-06-23T05:12:07.487 回答
3

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

于 2012-06-23T02:53:02.613 回答
2

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

考虑下面的例子：

搜索表单示例

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

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

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

与此同时，您有几个选择

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

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

示例：http ://designdisease.com/

优点：最容易设置。

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

选项 2 - 使用替代元素来设置背景样式

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

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

优点：更容易扩展到具有多个字段的更大表单。

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

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

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

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

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

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

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

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

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

缺点：不像 ov's fix 那样容易扩展到大型表单。

--

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

于 2012-08-17T19:59:13.150 回答
0

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

于 2012-06-23T03:10:54.633 回答
0

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

于 2012-06-23T02:58:48.187 回答