CODEWITHSUNDEEP
htmlcsstextbox
AngularDoubts
AngularDoubts

Reputation: 499

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

Upvotes: 1

Views: 9465

Answers (6)

L-HAZAM
L-HAZAM

Reputation: 84

You only need to specify the border size and type not only the color

look to the exemple bellow

.myclass:focus {
    border-bottom: 1px solid red;
}

Upvotes: 0

Abhinav Kaimal
Abhinav Kaimal

Reputation: 245

Just Try this code. Nothing Else is needed. It will turn your button red upon Click.

.myclass:focus {

 border:1px solid #FF0000;

}

Upvotes: 0

AngularDoubts
AngularDoubts

Reputation: 499

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.

Upvotes: 0

soumaya
soumaya

Reputation: 39

You need to do this 

.myclass:focus {
    border-bottom: 1px solid red;
}

Upvotes: 4

Charu Maheshwari
Charu Maheshwari

Reputation: 1643

Your styles are getting applied, just the semantics are wrong. Use below code

<!DOCTYPE html>
<html>
<head>
<style>
.:focus {
    background-color: yellow;
}
.myclass:focus {
    border-bottom: solid 2px 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>

Upvotes: 0

לבני מלכה
לבני מלכה

Reputation: 16251

Use border-bottom-color instead border-bottom to set only color(red)

Or use border-bottom:1px solid red

input:focus {
    background-color: yellow;
}
.myclass:focus {
    border-bottom-color: red;
}
<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>

Upvotes: 0

Related Questions