Question

仅使用HTML＆amp; CSS和没有使用JavaScript，我如何设置围绕焦点表单输入的字段集与其他字段集不同？（基本上，与this question相同，但没有JavaScript ）

以下是我想要实现的效果，目前正在使用JavaScript：

＆＃13;

$(document).ready(function()
{
    $('input').focus(function(){ $(this).parent().addClass('jshack'); });
    $('input').blur (function(){ $(this).parent().removeClass('jshack'); });
});

＆＃13;

fieldset { border: 2px solid lightgray; }
fieldset.jshack { border: 2px solid black; }
input:focus { background-color: lightyellow; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="?" method="get">
    <fieldset>
        <legend>Fieldset 1</legend>
        <input name="text1" type="text" />
        <input name="text2" type="text" />
    </fieldset>
    <fieldset>
        <legend>Fieldset 2</legend>
        <input name="text3" type="text" />
        <input name="text4" type="text" />
    </fieldset>
</form>

＆＃13;

所需的最终结果应该在视觉上相同，但不应以任何方式使用JavaScript。

UPDATE ：我不是在寻找神奇的CSS父选择器。我正在寻找使用CSS技巧重现效果，例如this answer在关闭之前无法发布。

Answer 1

如果没有javascript，这是不可能的，因为CSS中无法定位元素的父级...至少现在还没有。请参阅this question。

编辑：我错了，Rick Hitchcock在这里提出了一个非常好的简单的解决方法：https://stackoverflow.com/a/29454224/2126792。

使用聚焦元素突出显示字段集，无需JavaScript

1 个答案: