Whenever I interact with the input field, I want my border colors to animate in and fade out smoothly. But I'm facing some challenges.
Here is how I've set it up:
HTML
<input type="text" id="search-input" placeholder="Search..">
CSS
#search-input{
width:150px;
height:20px;
background-color: #f3f3f3;
font-size:16px;
}
#search-input:focus{
outline:none
}
jQuery
jQuery('#search-input').on('focus',function(){
jQuery(this).css('border', '2px solid #f27a1a','transition', '0.2s');
}).on('focusout',function(){
jQuery(this).css('border','2px solid transparent','transition', '0.2s');
});