Css for one "select option" box , "valid" and "invalid"

[FResher]

Hello helpers

I'm struggling with a 'select option' box , with applying Css ,

from 'load' , to 'one option selected' , I get on with a JQuery switcher using 'onChange()' function as event.
But I think CSS have one effiscient solution for my case.

<select id="sel-box">
    <option disabled>Choice :</option>
    <option value="1">A</option>
    <option value="2">B</option>
</select>

I aim for a full CSS use, so making this select tag and its options beautiful , as one option is selected.
It's around 'valid/invalid' , to throw out a switching JQuery implementation for now.

thanks in advance , thanks for your time and support

 

[VBService]

Do you mean something like this?

<select id="sel-box" required>
  <option value="" disabled selected>Choice :</option>
  <option value="1">A</option>
  <option value="2">B</option>
</select>

<style>
  select:invalid {
    border: 2px solid red;
    animation: pulse 1s infinite alternate;
  }

  select:valid {
    border: 2px solid green;
    animation: none; /* Stop animation when valid */
  }

  @keyframes pulse {
    0% {
      box-shadow: 0 0 5px red;
    }
    100% {
      box-shadow: 0 0 15px red;
    }
  }
</style>

 

[FResher]

Thank you very much VBService , I was in a lost battle , searching to achieve by all 'option' tags .
Thank you again !

 

[FResher]

Thank you very much fmb_amith !

I got few css parameters more now , with your help

 

[Edenharlow51]

nice