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 ?
0
give a positive ratinggive a negative rating
29 Oct 2022 at 03:23 PM
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" />

0
give a positive ratinggive a negative rating
02 Nov 2022 at 08:46 AM
Tim
Share on FacebookShare on TwitterShare on LinkedInSend email
x
x
2024 AnswerTabsTermsContact us