Apply :focus for a class name in html css

I have an input text box. On selecting the same, the highlighter(blue box around text box) appears. I need a single red line as border-bottom on input text box selection. Please see the code:

input:focus {
  background-color: yellow;
}

.myclass:focus {
  border-bottom: red;
}

<p>Click inside the text fields to see a yellow background:</p>

<form>
  First input box: <input class="myclass" type="text" name="firstname"><br> 
  Second input box: <input type="text" name="lastname">
</form>

As I have multiple input textbox in my page and I want to apply style to only one textbox. So I can't use the input:focus code. How can I apply ':focus' to a particular class in css? Please help thanks in advance

Solution

solved by adding outline:color and modifying border style. Here is the code

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    input:focus {
        background-color: yellow;
    }
    .myclass:focus {        
		border: none;
  		border-bottom: solid 0.5px red;
  		outline: red;
    }
</style>
</head>
<body>

    <p>Click inside the text fields to see a yellow background:</p>

    <form>
    First input box: <input class="myclass" type="text" name="firstname"><br>
    Second input box: <input type="text" name="lastname">
    </form>
  
</body>
</html>

Thank you Pete for the spark, mentioning that the highlighter is outline. And for all who answered.