将样式应用于输入类型文本焦点上的提交按钮 [关闭]答案

【问题标题】：Apply styles to submit button on input type text focus [closed]将样式应用于输入类型文本焦点上的提交按钮 [关闭]
【发布时间】：2013-09-02 05:41:21
【问题描述】：

我一定是做错了什么，但我找不到原因。 Here's the fiddle

为什么会这样：

#searchClubsForm input[type=text]:focus {
    background: blue;
}

但这不是吗？

#searchClubsForm input[type=text]:focus #searchClubsForm input[type=submit] {
    background: blue;
}

【问题讨论】：

你少了一个逗号
这个问题似乎是题外话，因为它是关于错字
您是否希望在文本输入获得焦点时更改提交按钮的背景颜色？
不，这不是我想要的。我不希望 background: blue 应用于 #searchClubsForm input[type=submit] 焦点在文本字段上。
啊，我明白了。 IMO 最好的方法是使用 Javascript/Jquery。可能有一个 CSS 方法，我会尝试做一些事情，如果可行，我会在下面发布。

标签： css css-selectors

【解决方案1】：

好的，所以你要改变这个：

#searchClubsForm input[type=text]:focus #searchClubsForm input[type=submit] {
    background: blue;
}

到这里：

#searchClubsForm input[type=text]:focus + input[type=submit] {
    background: blue;
}

这使用相邻兄弟选择器在焦点时设置按钮样式。

http://fiddle.jshell.net/mMJZ8/2/

【讨论】：

是的，这就是我要找的东西

【解决方案2】：

您可以在父元素的focus 或hover 上设置子元素的样式，但input[type=submit] 不是input[type=text] 的子元素，因此无法使用当前示例。

您应该尝试使用相邻的兄弟选择器，如下所示：

#searchClubsForm input[type=text]:focus + input[type=submit] {
    background: blue;
}

【讨论】：

可以使用相邻兄弟选择器
啊，我正在更新它，伙计。我的意思是有问题的那个是不可能的:)
我对你来说太快了！大声笑
我很感激，我也把你拉平了，似乎出于某种原因，这个问题有很多反对意见......

【解决方案3】：

您在两个选择器之间缺少逗号。您当前定位它的方式意味着您在输入内有一个输入，这是不可能的。

#searchClubsForm input[type=text]:focus, #searchClubsForm input[type=submit] {
    background: blue;
}

【讨论】：

我为什么要在那儿加逗号？德莱顿只是表明我想要的是完全正常的

【解决方案4】：

缺少一个逗号：

#searchClubsForm input[type=text]:focus, #searchClubsForm input[type=submit] {
    background: blue;
}

【讨论】：

不，为什么？我不想要逗号

【解决方案5】：

你需要用 Jquery 来做这个：

$('#searchClubsForm input[type=text]').focus(function () {
    $('#searchClubsForm input[type=submit]').css({
        'background': 'blue'
    });
});
$('#searchClubsForm input[type=text]').blur(function () {
    $('#searchClubsForm input[type=submit]').css({
        'background': '#F0F0EE'
    });
});

http://fiddle.jshell.net/mMJZ8/3/

确保你有一个 js 文件

【讨论】：

-1 jQuery 不是解决方案。这可以通过 CSS 2.1 跨浏览器实现。