Get glowing outline shadow on input field on focus - CSS

How can I get the glowing outline shadow on input field or textarea ? How to show the input outline with specific color on focus ?

Hi,

To get the shadow outline effect for input field or textarea, you can use the solution below, based on box-shadow and border color. Some web browsers use their own outline shadow, so you will have to disable it, to get the required shadow color.

Glowing outline shadow for input field:

<style>

.inputfield {
font-size: 15px;
padding: 5px;
border-color: #DDDDDD;
border-style: solid;
border-width: 1px;
outline: none;
border-radius: 4px;
}

.inputfield:focus {
border-color: #80b9ff;
box-shadow: 0 0 0 .2rem rgba(128, 185, 255,.5);
}

</style>

<input class="inputfield" />