How to override CSS class over input[type]?

Question

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">

Have a look at CSS specificity. The former has a higher specificity, and thus will not be overridden by the latter. — agrm
– agrm, Commented Jul 24, 2020 at 9:00
yes mate, I got it from the answers below. I really didn't think of that. — JohnnyD
– JohnnyD, Commented Jul 24, 2020 at 9:03

ezio4df · Accepted Answer · 2020-07-24 09:01:38Z

3

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,

edited Jul 24, 2020 at 9:01

answered Jul 24, 2020 at 8:58

ezio4df

4,4556 gold badges19 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

XHtml Jun 15 at 15:22

why is necessary add that on elements input ???

dako · Accepted Answer · 2020-07-24 08:57:31Z

3

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

Instead of .choice_num select input.choice_num

answered Jul 24, 2020 at 8:57

dako

1,1932 gold badges13 silver badges26 bronze badges

Collectives™ on Stack Overflow

How to override CSS class over input[type]?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related