How to override CSS class over input[type]?

user_10326250 0
Viewed 537

I am trying to override the input type

input[type="number"] {

  width: 100px;

}

with the following css classes.

.choice_num{
    width: 83px;
    text-align:right;
    padding: 2px;
    font-weight: bold;
}

.choice_num_1{
    width: 82px;
    text-align:right;
    padding: 2px;
    font-weight: bold;
    margin-right: 2px;
}

.float_nums{
    width: 62px;
    text-align:right;
    padding: 2px;
    font-weight: bold;
}

but it doesn't seem to work. Any ideas?

This is the code that you asked (sorry it didn't occur to me to add it.)

<input type="number" class="choice_num" step="<?php echo $epilogi['posotita']; ?>" min="<?php echo $epilogi['posotita']; ?>" value="<?php echo $epilogi['posotita']; ?>" onchange="calculate()" id="a1" name="posotita">&nbsp;&nbsp;

<input type="text" class="tmxs" value="KG" readonly="readonly" name="monmetr">&nbsp;&nbsp;

<input type="number" class="choice_num_1" value="<?php echo $epilogi['timi']; ?>" id="a2" readonly="readonly">&nbsp;&nbsp;

<?php } ?>

<input type="number" class="float_nums" value="<?php echo number_format((float)$sum, 2, '.', ''); ?>" id="a3" readonly="readonly">
css
2 Answers

Just add more priority to it. Fast way to do it:

Instead of .choice_num select input.choice_num

user_100335840

Just add input before them, like this,

input[type="number"] {
  background-color: orange
}

input.choice_num {
  background-color: blue
}

input.choice_num_1 {
  background-color: green
}

input.float_nums {
  background-color: red
}
<input type="number" />
<input type="number" class="choice_num" />
<input type="number" class="choice_num_1" />
<input type="number" class="float_nums" />

By doing it the specificity of the later selectors increase and thus ur css works,

user_107941400
Related