css - 激活时添加搜索框发光效果

Question

我试图仅在用户单击它进行键入时在搜索字段周围放置边框阴影。所以当字段处于事件状态时，我需要制作像橙色这样的发光效果颜色。我该如何添加？我相信这是一个非常简单的任务。下面是CSS。我应该包括什么？请帮我。谢谢(-:

.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

试试这个

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;
}