How to color input border bottom using CSS

Question

I need to color a input border bottom when the input is not focus. This is my html code:

<input type="number" id="nc" name="days" class="numero" placeholder="" min="0"><br />

This is my css code:

.numero {
    border-bottom-color: red;
}

But it doesn't work. Anyone can help?

Answer 1

use this code

input.numero {
 border-bottom-color:red;
}

Working Fiddle

Answer 2

Add some border style:

.numero{
  border: 1px, solid;
  border-bottom-color: red;
}

Answer 3

The border is red in your example:

.numero {
  border-bottom: 1px solid #F00;
}

<input type="number" id="nc" name="days" class="numero" placeholder="" min="0"><br />

Simply use the shorthand to add a style, size and color and it works.

Now, in order to remove this when it is focused:

.numero:not(:focus) {
  border-bottom: 1px solid #F00;
}

<input type="number" id="nc" name="days" class="numero" placeholder="" min="0"><br />

We use the :not() functionality with the :focus to check if the element in question is not focused.

Answer 4

You should define the border thickness in the css. You can write that like this

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

And on focus if you want another color you can like this

.numero:focus {
    border-bottom:1px solid transparent;
}

You can change the value of transparent to any other color of your preference.

Answer 5

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

Answer 6

.numero {
  border-bottom: 2px solid cyan;
}

<input type="number" id="nc" name="days" class="numero" placeholder="" min="0"><br />

for any query please comment. All the best