Javascript Make：焦点更改另一个类的css

假设我有以下代码：

HTML

显然，这个代码不起作用。我希望在我的输入框上有焦点时执行一些特定的css。这有可能吗

我不是专门寻找html/css的解决方案。任何能够实现这一目标的解决方案都是受欢迎的

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

只有当其他元素是具有伪类的元素的同级或子级时，才能使用伪类（例如

：hover

或

：focus

）修改其他元素。那是因为它们有相当的限制性

您可以使用

选择器选择直接子级，使用

+

选择器选择直接同级。例如，如果您具有以下HTML：

<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，您有更大的灵活性。和事件可用于切换CSS类。下面的示例演示了实现这一点的CSS和JavaScript技术

函数setFocused（）{
var results=document.querySelectorAll（'.arbitral'）；
对于（结果的结果）{
result.classList.add（'focused'）；
}
}
函数（）{
var results=document.querySelectorAll（'.arbitral'）；
对于（结果的结果）{
result.classList.remove（'focused'）；
}
}
var results=document.querySelectorAll（'input[type=“text”]”）；
对于（结果的结果）{
结果：添加了VentListener（“focusin”，setFocused）；
结果：添加了EventListener（“聚焦输出”，未聚焦）；
}

input[type=“text”]：焦点+输入[type=“submit”]{
/*一些甜蜜的CSS*/
背景颜色：绿色；
}
.专横{
/*更甜蜜的CSS*/
颜色：红色；
}

这是一个任意元素。它既不是孩子，也不是兄弟姐妹
文本字段。不能将其作为伪类的结果进行选择
使用CSS对文本字段执行操作，但可以使用
客户端脚本，如JavaScript。

可能会添加一个ID

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

CSS

---

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

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

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

.myAwesomeInputBox:focus~.dls同级{
&：：之前{
变换：比例（1）；
边框颜色：红色；
}
}

哪个元素应该在输入标记的焦点上设置样式？我想您可能已经知道这一点，但是您上面的代码不起作用，因为带有

class=container

的元素不是输入的子元素。这是不可能的，线索是名称，层叠样式表。@Hashem Qolami，我没有尝试设置外部div的样式。我正在尝试设置任何不是输入框子元素的div的样式。例如，在页眉中有一个输入框，并在整个页脚上放置display:none。在我看来，这不是一个重复的问题。@MarcoGeertsma那么这不是一个外部

div

，你在你发布的代码中显示的吗？你不能瞄准任何

，只能瞄准下一个兄弟姐妹。jQuery来拯救他们！谢谢你的回答，是的，如果我想设计输入框的父项，这是有效的。因此，这在一定程度上是正确的，但是是否也可以为任何类设置样式？只是对

输入的样式进行了更改。基本上，您可以添加和删除任何喜欢的类。并将该类的样式设置为您想要的特定样式。虽然我的答案可能会实现其假设的功能，@Woodrow的解决方案更好、更干净。我选择这个解决方案。
input[type="text"]:focus + input[type="submit"] {
    /* some sweet CSS */
    background-color:green;
}

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

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

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

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

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

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