css won't apply correctly on input tag if I am using a class-CodePudding

I am trying to customize my input forms, but something strange is happening and I can't understand why it is happening.

Here is my HTML:

    <input type="text"  >
<input type="text"  >
<input type="text"  >

As you can see I have three input element with a "multi-choice" class.

This is the CSS I made just for testing:

.multi-choice {
background-color: red;
height: 400px;
width: 10px;
border: 10px;
outline: none;

}

What's happening is that CSS is only being applied on background-color and height resulting in huge red input bars. However it is completely ignoring width, border and outline.

When I do the same thing using id instead of class it is working correctly. Why it is happening?

CodePudding user response：

I guess everything is working fine with your html and css. Maybe you could not realize your border because you did not give different color

.multi-choice {
background-color: red;
height: 200px;
width: 200px;
border: 10px solid black;
outline: none;
}

<input type="text"  >
<input type="text"  >
<input type="text"  >

CodePudding user response：

The border instruction requires more. Just saying 10px isn't enough.

border: 10px solid black;

Will work better.