设置input边框被选中时渐变

HTML:

<div class="form-item">
     <input type="text" />
</div>

CSS:

.form-item input {
border:2px solid #ccc;
border-radius: 2px;
height: 40px;
padding: 0 16px;
transition: background 0.3s ease-in-out;
width: 20%;
}
.form-item input:focus {
outline: none;
border-color: #9ecaed;
box-shadow: 0 0 10px #9ecaed;
}

效果如下：