html - 更改包含输入表单的 div 的 CSS

Question

当您专注于“输入”时，我想要做的就是更改“应用程序搜索”的边框。我想只使用 CSS 来做到这一点。

帮助？谢谢你 ：）

<form class="apps-search" type="text"  method="GET">
   <input name="search_query" id="search_query" placeholder="Hey" />
<button type="submit"> <span class="search-icon"> S</span></button>
</form>

我的代码：http: //jsfiddle.net/yhQ2C/

编辑：好的，所以这不能在 CSS、jquery/javascript 帮助中完成？

Answer 1

您将需要设置 2 个 CSS 类（即apps-search和app-search-black-border）

然后，使用一些基本的 jquery 进行切换。这是一篇解释您需要做什么的文章：http: //buildinternet.com/2009/01/changeing-form-input-styles-on-focus-with-jquery/

Answer 2

我添加了一些用于焦点和模糊的 jquery 处理程序以及一个示例 css 类“悬停边界”。这是小提琴 - http://jsfiddle.net/yhQ2C/4/

$('#search_query').focus(function(){
    $('.apps-search').addClass('hover-border');
});

$('#search_query').blur(function(){
    $('.apps-search').removeClass('hover-border');
});