输入框高亮

在写登录页面时，想让输入框获得焦点时高亮，代码及效果如下：

html部分：

<form>
	<div class="form-group">
		<label>邮件</label>
        <input type="email" class="form-control" placeholder="请输入邮件地址">
	</div>
    <div class="form-group">
        <label>密码</label>
        <input type="password" class="form-control" placeholder="请输入密码">
    </div>
	<button type="submit" class="btn">登录</button>
</form>

css部分：

.form-control{
    width: 450px;
    height: 32px;
    outline-style: none;
    border:1px solid #d7d7d7;
    border-radius: 5px/5px;
    padding-left:10px;
    -moz-box-shadow: inset 0 0 5px #CCC;
    -webkit-box-shadow: inset 0 0 5px #CCC;
    box-shadow: inset 0 0 5px #CCC;
}
.form-control:focus{
    -moz-box-shadow:0 0 10px #06c;
    -webkit-box-shadow:0 0 10px #06c;
    box-shadow:0 0 10px #06c;
}

效果：

盒子内部阴影：

获得焦点后：