How to Override CSS for Tables & Input Fields?

Also noticed there are alternating row colors in tables that I did not put in here: http://www.finalsmoke.net/order-form-1/

Enfold is doing some complex overriding of tables and input fields somewhere.

My css for tables (below), is not really being obeyed, nor is my css for input fields.

#fstable table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border-color: #000;
border-width: 2px;
outline: 0;
width: 285px;
font-size: 100%;
vertical-align: baseline;
border-collapse: True;
background: none;
}

Can you please show me how to counteract what Enfold is doing with tables and input fields so my own styles will come through?

Thanks.

Thank you, Josue!

That got me a lot closer to my desired result — http://www.finalsmoke.net/order-form-1/

Now I just need to figure out where the alternating row colors in tables are coming from, along with very light-colored fonts and borders in input fields and select fields (something still overrides a bit of my css).

Please let me know if there is anything I am still missing.

Hmm… nope.

tableft is my font style, which displays correctly as white.

And tr:nth-child seems to add background color, but, I want to remove the <tr> background color and have my tables display as transparent.

Somewhere, alternating color table rows (white/gray) are being styled, and I would like to remove that.

Any ideas?

Thanks!

Hi Josue… No change.

I think I am already applying transparent to <tr> with my table style here…

#fstable table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
width: 285px;
line-height: normal;
font-size: 100%;
vertical-align: baseline;
border-collapse: True;
background: transparent;
}

Somewhere, a light gray background (#F8F8F8) is being inserted into <tr>, or maybe individual <td>’s, or the table as a whole <table>.

Also, something is causing the input fields to be styled with light gray borders (#E1E1E1) and fonts (#919191), ignoring my black as shown in my form field styles here…

input.fsfield {
border: 1px solid #000;
color: #000;
line-height: normal;
padding: 2px;
background-color: #FFF;
font-size: 13px;
font-family: Verdana, Arial;
margin: none;
}

select.fsselect {
border: 1px solid #000;
color: #000;
line-height: normal;
padding: 2px;
background-color: #FFF;
font-size: 13px;
font-family: Verdana, Arial;
margin: none;
}

Any help is appreciated.

Great. The form fields are now the correct colors.

The initial table style you wrote did not work, but I was able to make the table background transparent by making a small change to your code.

Here is what worked (I moved the word table to the right side, instead of table#fstable)…

#fstable, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
width: 285px;
line-height: normal;
font-size: 100%;
vertical-align: baseline;
border-collapse: True;
background: transparent !important;
}

The word “important” is important :) It overrides something we cannot find apparently.

And a small thing – the select field (to choose a state) has a very light vertical bar at the far right. No biggie but would like to get rid of it. You can see that bar in the state field here – http://www.finalsmoke.net/order-form-1/ , but it does not exist in the state field in my page before using Enfold here – http://www.quithere.com/fsmokewp/order-form/

Thanks for your help so far, and hope we can solve it all the way!