Question

我只是在用户点击它以进行输入时，试图在搜索字段周围放置边框阴影。所以我需要在场激活时制作像橙色的发光效果颜色。我该怎么做呢？我确定这是一项非常简单的任务。下面是CSS。我应该包括什么？请帮我。 thx（ - ：

.wsite-search {
vertical-align: middle;
width: 170px;
box-shadow: 0px 0px 7px 1px black;
border-radius:7px;
}

.wsite-search-input {
float: right;
height: 20px;
padding: 5px 5px !important;
vertical-align: middle;
width: 140px;
border: 0;
color: #ffc500;
float: right;
font-style: italic;
background: url(input-bg.png) no-repeat;
}

.wsite-search-button {
position: relative;
width: 20px;
height: 30px;
float: left;
border: 0;
background: url(submit-bg.png) no-repeat;
}

Answer 1

使用jQuery focus and blur，

尝试以下操作

＆＃13;

$(document).ready(function(){
  $("input[type = 'search']").on("focus",function(){
    $(this).css({
      'boxShadow' : '1px 1px 35px 0px #f75C30',
    }); 
    $("input[type = 'submit']").css({
      'boxShadow' : '1px 1px 35px 0px #f75C30',
    }); 
  });
  
  $("input[type = 'search']").on("blur",function(){
    $(this).css({
      'boxShadow' : '0px 0px 0px 0px #f75C30',
    }); 
    $("input[type = 'submit']").css({
      'boxShadow' : '0px 0px 0px 0px #f75C30',
    }); 
  });
  
});

＆＃13;

input{
  transition:1s ease;
  border:none;
  background:#111;
  color:#fff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="search">
<input type="submit">

＆＃13;

在

中添加此内容

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script></head>

即。 jquery cdn。

然后在关闭</body>

之前添加此内容

<script>$(document).ready(function(){
   $("input[type='text']").on('focus',function(){
     $('form').css({
     'boxShadow' : '1px 1px 35px 0px #f75C30'
     });
   });
    $("input[type='text']").on('blur',function(){
     $('form').css({
     'boxShadow' : '0px 0px 0px 0px #f75C30'
     });
   });
});
</script>

CSS

form{
  transition:1s ease;
}

Answer 2

试试这个

input{
    border: 1px solid #ccc;
    border-radius: 2px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #555;
    font-size: 14px;
    margin: 0;
    padding: 3px 12px;
   width: 250px;
}

input:focus {
    border-color: #66afe9;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
    outline: 0 none;
}

活动时添加搜索框发光效果

2 个答案: