Question

我们说我有以下代码：

HTML

<div class="container">
   <input class="myAwesomeInputBox">
</div>

CSS

.input [type=text]:focus > .//ANY CLASS SOMEWHERE ON THE WEBSITE{
   //Some sweet CSS.
}

显然这段代码不起作用。我想要一些特定的CSS在我的输入框上有焦点时执行。这是可能吗？

我并没有特别寻找仅限html / css的解决方案。任何能够实现这一目标的解决方案都是受

上面的代码只是一个非常简单的例子。我的问题非常简单。是否可以使用以下方法更改网站上任何元素的样式：聚焦于输入框。

Answer 1

只有当其他元素是具有伪类的元素的直接或间接兄弟或子元素（例如:hover或{{1>时，才能使用伪类作为修改其他元素的操作。 }}）。那是因为CSS child/sibling selectors相当严格。

您可以使用:focus选择器选择直接子项，使用>选择器选择直接同级。例如，如果您有以下HTML：

您可以在文本字段具有焦点时设置按钮的样式（因为它是文本字段的直接兄弟），但由于文本字段获得焦点，因此无法对任意段落进行样式设置（因为它不使用客户端脚本（JavaScript，jQuery等）既不是孩子也不是兄弟姐妹，它是父母的兄弟姐妹。

这个CSS会设置提交按钮的样式，并且可以更改为选择任何直接或间接的孩子或兄弟：

<form>
    <input type="text" />
    <input type="submit" />
</form>
<p class="arbitrary">
    This is an arbitrary element. It is neither a child nor sibling of 
    the text field. It cannot be selected as a result of a pseudo-class 
    action on the textfield using CSS, but can be selected using 
    client-side scripting such as JavaScript.
</p>

使用Javascript，当然，您有更大的灵活性。 focus和blur事件（Firefox尚不支持focusin和focusout）可用于切换CSS类。这是一个演示实现此目的的CSS和JavaScript技术的示例。

input[type="text"]:focus + input[type="submit"] {
    /* some sweet CSS */
    background-color:green;
}

function setFocused() {
  var results = document.querySelectorAll('.arbitrary');
  for (result of results) {
    result.classList.add('focused');
  }
}

function unsetFocused() {
  var results = document.querySelectorAll('.arbitrary');
  for (result of results) {
    result.classList.remove('focused');
  }
}

var results = document.querySelectorAll('input[type="text"]');
for (result of results) {
  result.addEventListener("focus", setFocused);
  result.addEventListener("blur", unsetFocused);
}

input[type="text"]:focus + input[type="submit"] {
  /* some sweet CSS */
  background-color: green;
}

.arbitrary.focused {
  /* even more sweet CSS */
  color: red;
}

这是上面代码的jQuery等价物，如果这是你的果酱。

<form>
  <input type="text" />
  <input type="submit" />
</form>

<p class="arbitrary">
  This is an arbitrary element. It is neither a child nor sibling of
  the text field. It cannot be selected as a result of a pseudo-class
  action on the textfield using CSS, but can be selected using
  client-side scripting such as JavaScript.
</p>

请注意，如果你决定要做类似的事情，除了使用“悬停”触发器而不是“焦点”，你可以使用JavaScript mouseover和mouseout函数，或jQuery { {3}}函数，它带有两个参数（一个用于输入悬停的处理程序和另一个用于离开悬停的处理程序）。

Answer 2

可能会添加ID

<div class="container">
   <input class="myAwesomeInputBox" id='myAwesomeId' type="text">
</div>

并添加和删除这样的类。不解决你的问题。

$('#myAwesomeId').on({
    focus: function () {
        $(this).addClass('focused');
    },

    blur: function () {
        $(this).removeClass('focused');
    }
});

CSS

input.focused {
    border:3px solid blue;
}

<强> FIDDLE

Answer 3

如果要更改的元素css是同级，则可以这样使用

        <div class="container">
           <input class="myAwesomeInputBox">
           <div className="dls-sibling">
        </div>

        
  .myAwesomeInputBox:focus ~.dls-sibling {
        &::before {
            transform: scale(1);
            border-color:red;
       
  }
}

Make：焦点改变另一个类的css

3 个答案: