Why are these number input field arrows not hiding?-CodePudding

These input fields keep showing the arrows, although I keep trying to hide them with CSS. Not sure if I can sneak in a little thing, but how to do some padding-top on .total_price text?

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button,
{
  -webkit-appearance: none;
  -moz-appearance: none;
}

.total_price {
  padding-top: 2 10px;
}

<tbody id="tableRows">
  <tr>
    <td><input type="number" min="0"  name="numberInputs" value="370"></td>
    <td><input type="number" min="0"  name="numberInputs" value=""></td>
    <td ><strong>$0.00</strong></td>
    <td><input type="checkbox"></td>
  </tr>
</tbody>

Thank you for your help!

CodePudding user response：

You have added an extra comma before the brackets, remove it.

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button/*, - shouldn't be here*/
{
  -webkit-appearance: none;
  -moz-appearance: none;
}

.total_price {
  padding-top: 2 10px;
}

<tbody id="tableRows">
  <tr>
    <td><input type="number" min="0"  name="numberInputs" value="370"></td>
    <td><input type="number" min="0"  name="numberInputs" value=""></td>
    <td ><strong>$0.00</strong></td>
    <td><input type="checkbox"></td>
  </tr>
</tbody>