How to use css @keyframes and animation properly for dropdown

December 21, 2022

I am having a problem implementing the @keyframes and animation for dropdown. I have implemented blink animation for my dropdown. But, when i open the dropdownlist and try to scroll by mousepress, the scrollbar is not properly working, it’s not staying with my mousepress. Please, check the code snippet and run the code snippet to understand the problem. Thanks

@keyframes blink {
  50% {
    border-color: #fff;
  }
}

.blink {
  border: 3px solid #0061a0;
  font-weight: bolder;
  animation: blink 1s infinite;
  animation-iteration-count: infinite;
}

<select name="birthYear" class="blink">
  <option>YYYY</option>
  <option value="2022">2022</option>            
  <option value="2021">2021</option>            
  <option value="2020">2020</option>            
  <option value="2019">2019</option>            
  <option value="2018">2018</option>            
  <option value="2017">2017</option>
  <option value="2016">2016</option>  
  <option value="2015">2015</option>
  <option value="2014">2014</option>
  <option value="2013">2013</option>
  <option value="2012">2012</option>
  <option value="2011">2011</option>
  <option value="2010">2010</option>
  <option value="2009">2009</option>
  <option value="2008">2008</option>
  <option value="2007">2007</option>
  <option value="2006">2006</option>
  <option value="2005">2005</option>
  <option value="2004">2004</option>
  <option value="2003">2003</option>
  <option value="2002">2002</option>
  <option value="2001">2001</option>
  <option value="2000">2000</option>
  <option value="1999">1999</option>
  <option value="1998">1998</option>
  <option value="1997">1997</option>
  <option value="1996">1996</option>
  <option value="1995">1995</option>
  <option value="1994">1994</option>
  <option value="1993">1993</option>
  <option value="1992">1992</option>
</select>

>Solution :

You can animate a wrapper <div> element instead.

@keyframes blink {
  50% {
    border-color: #fff;
  }
}

.blink {
  border: 3px solid #0061a0;
  font-weight: bolder;
  animation: blink 1s infinite;
  animation-iteration-count: infinite;
}

<div class="blink" style="display: inline-block;">
<select name="birthYear"><option>YYYY</option><option value="2022">2022</option><option value="2021">2021</option><option value="2020">2020</option><option value="2019">2019</option><option value="2018">2018</option><option value="2017">2017</option><option value="2016">2016</option><option value="2015">2015</option><option value="2014">2014</option><option value="2013">2013</option><option value="2012">2012</option><option value="2011">2011</option><option value="2010">2010</option><option value="2009">2009</option><option value="2008">2008</option><option value="2007">2007</option><option value="2006">2006</option><option value="2005">2005</option><option value="2004">2004</option><option value="2003">2003</option><option value="2002">2002</option><option value="2001">2001</option><option value="2000">2000</option><option value="1999">1999</option><option value="1998">1998</option><option value="1997">1997</option><option value="1996">1996</option><option value="1995">1995</option><option value="1994">1994</option><option value="1993">1993</option><option value="1992">1992</option></select>
</div>