Cannot change width of input element in CSS

Question

I'm trying to change the width property of <input> inside of <td> element.

I have tried simply this and more variants like max-width but nothing is changing. Input box width is still the same. It works just fine in classic html, css files but its bugged in asp.net for some reason. Thx for any tips.

<table>
  <tr>
    <td><input class="numericInput"/></td>
  </tr>
</table>

td {
    max-height: 30px;
    max-width: 30px;
    border: 1px solid;
    text-align: center;
}

input {
    width: 20px;
}

Answer 1

Did you forget to put it inside a style tag?

<style>
    td {
        max-height: 30px;
        max-width: 30px;
        border: 1px solid;
        text-align: center;
    }

    input {
        width: 20px;
    }
</style>

Also you might want to consider the below option if you are using @RenderBody() , declare the below code

@RenderSection("Styles", required: false)

in your base layout and add the below code

@section styles{
    <style>
        /* your style here */
    </style>
}

in your views