How to change the warning error's color of a span tag under a form in a mixture of HTML, Javascript and PHP

I am trying to change the color of a warning error in a span tag under a form. I wrote toggle in JS using style.color or classList to change the color, but unable to change the color. Due to the space problem, I am not writing here the JS toggle code.

Here is the code:

PHP:

 $nameErr = "";
 $fname = "";
 if ( $_SERVER[ "REQUEST_METHOD" ] == "POST" ) {
      if ( empty( $_POST[ "fname" ] ) ) {
           $nameErr = "Name is required";
      } else {
           $fname = cleanvar( $_POST[ "fname" ] );
           if ( !preg_match( "/^[a-zA-Z ]*$/", $fname ) ) {
                $nameErr = "Only letters allowed";
           }
      }
 }

 function cleanvar( $userinput ) {
      $inp = trim( $userinput );
      $inp = stripslashes( $userinput );
      $inp = htmlspecialchars( $userinput );
      return $inp;
 }

HTML:

  <form method="post" class="formbox" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
      <div>
           <label for="fname"> First Name</label>
           <br />
           <input type="text" name="fname" value="<?php echo $fname;?>" required>
           <br />
           <span style="font-size:14px;color:#063701;"> Only letters allowed </span> <span style="font-size:14px;color:#FF0000;" >
           <?php echo $nameErr;?>
           </span> </div>
      <div>
           <input type="submit" name="submit" class="buttons"  value="Submit">
      </div>
 </form>

I create my own version of your code, I tried to put a new style to the span and make it an alert box...

<form method="post" class="formbox" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
    <div>
        <label for="fname"> First Name</label>
        <br />
        <input type="text" name="fname" value="<?php echo $fname;?>" required>
        <br />
        <?php if(!empty($nameErr)){?>
           <span class="alert-box" style="display: block; width: fit-content; border-radius: 5px; font-size:14px;color:#fff; background-color: goldenrod; padding: 10px;" >
                <?=$nameErr?>
           </span>
        <?php } ?> 
        </div>
        <div>
        <input type="submit" name="submit" class="buttons"  value="Submit">
     </div>
</form>

then in javascript,

setTimeout(() => {
    document.querySelector('.alert-box').style.display = "none";
}, 1000);

that will appear once the form is posted and an error has occured