Question

当我专注于“输入”时，我想做的就是改变“apps-search”的边框。我想用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 ＆amp; app-search-black-border ）

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

Answer 2

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

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

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

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

2 个答案: