Question

我正在尝试创建一个搜索栏，以便在活动时有效地推动某些事情。目前，代码将推送所有内容，但当它失焦时，只有search_bar将返回其先前的状态。当我为混音添加模糊时，所有内容都应该切换，但我无法再输入search_bar。为什么我不能让这些东西正常工作？以下是一个完整的工作示例：http://jsfiddle.net/easilyBaffled/bbrP9/

$(document).ready(function(){
  $(".search_bar").bind('focus active', function(){
      $(this).toggleClass('search_bar_focus');
      $('.search_button').toggleClass('search_button_focus');
      $('.logo').toggleClass('logo_focus');
  });

编辑：值得注意的是，当我添加模糊时，整个事情可能会随机开始工作，但是当我重新加载页面时，它会赢得，然后它会返回并且向前。它没有一致性。

Answer 1

问题似乎在于搜索栏输入字段的0px设置。将font-size设置为正确的值并将负text-indent设置为隐藏文本可以解决问题。

<强> CSS

.search_bar {
    /* everything else remains the same */
    font-size: 12px;
    text-indent: -999px;
}
.search_bar:focus, .search_bar:active {
    /* everything else remains the same, remove font-size*/
    text-indent: 0px;
}

其余代码保持不变。

您还可以选择在评论中使用Adeneo的优秀答案。

jsFiddle Demo

无法使用活动和焦点正确切换切换

1 个答案: