0

I am having trouble getting my css to work for a number input which is nested inside a table on my custom plugin template page.

I've used wp_enqueue_style() to load my css file and it has worked well thus far with all other aspects. I have a form which contains a table inside of it.

<form id="form1" action="" method="get">
  <table class="table-class">
    ....
    <td><input type="number" name="xxx" min="0" max="4"></td> 
    ....
  </table>
</form>

The corresponding CSS:

table.table-class thead {
  ..... etc ...
}

This table class works as expected an formats my table well. However, I want to change the colour of the input box on my number input. I've tried the following:

table.table-class input {
    border: 3px solid red;
}

input {
    border: 3px solid red;
}

input[type="number"] {
    border: 3px solid red;
}

table input[type="number"] {
    border: 3px solid red;
}

I also tried adding a class to the input button called input-class

.input-class {
    border: : 3px solid red;
}

None of these worked. I don't know if something with Wordpress is maybe overriding these settings. Any help is appreciated, thanks.

  • Do you know how to use 'Inspect' in Chrome, or the analogous thing in another browser? That would indicate directly if your CSS was getting overridden. – Loren Rosen Apr 13 at 4:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.