Hi there I've been asked to create CSS background colour around a whole tr for a mandatory field. It is only to show up when the user fails to complete the field after they select submit.

I'm not quite sure the best way to do this.

Should I place a div

around the tr or place a class in the tr ?

Your help would be greatly appreciated.

  • It sounds very much like you're using a table element to layout your form fields...but of course, you wouldn't use a table for non-tabular data now would you ;) danwellman over 7 years ago
  • I wish there was a way I could give a +1 to danwellman for this comment. C'mon, doctype, make it happen. Abinadi Ayerdis over 7 years ago
  • That comment is actually uncalled for especially when you have no idea about my work scenario. Felicia over 7 years ago
  • The comment was posted and meant in a friendly tone, hence the winky-smiley. Regardless of your work scenario, form fields have no semantic place in a table... See http://phrogz.net/css/WhyTablesAreBadForLayout.html (and note it's time-stamp) danwellman over 7 years ago
  • Ok well I apologise if I judged your tone incorrectly. I thought you may've been having a dig. I often see snarky comment replies in some forums and I find these comments such a waste of energy. Have a good day. Felicia over 7 years ago

1 answer

Ktash 1851
2
points
This was chosen as the best answer

Standard Solution

Easiest way in my opinion is to do it with a class on the <tr> on submit if it is invalid. Something along the lines of

tr.invalid { background-color: red; }

would work. Loop through each element and check its validity (see below for a standards compliant, but not necessarily backward compatible way to do this). If it's invalid, stop the event and mark the <tr> parent as invalid. Just make sure on submit you first remove the class from all of the elements so that you don't get any false positives a second time around.

Forward looking additions

As a side note, you can add some extra highlighting with CSS3 and HTML 5. I posted about it on a SO question (which was a really interesting problem, I think). Obviously it won't be supported for older browsers, and you won't be able to select the whole <tr> since you can't do parent selecting in CSS, but you could maybe add it as a forward looking approach for extra emphasis. Something like:

HTML

<input type="text" pattern="regex" />

or

<input type="text" required="required" />

CSS

.invalid input:invalid { box-shadow: 1px 1px 4px red; }
Answered over 7 years ago by Ktash
  • Thanks very much for your answer. I shall give that a try. Cheers Felicia over 7 years ago
  • If you like the answer, Felicia, give Ktash credit: up-vote it or set him as the best answer. Ktash, like the rest of us, does this for the points, not because he has tons of time during his day just to help you out. Abinadi Ayerdis over 7 years ago
  • what you said about +1'ing comments ;) danwellman over 7 years ago
  • Thanks Abinadi and actually I was going to WHEN I had finished with this query as I am not yet. As I said back in my second comment that I will give it a try. Felicia over 7 years ago
  • Hi Ktash. I did try the tr.invalid but now I cannot see the red around the table row. I'm just not sure what I am doing wrong here. Here is the code: <tr class="bbh_invalid"> <td> <img src="/imagesS10/bullet.gif"> </td> <td>Last Name</td> <td> <input type="text" id="reg_LastName" name="reg_LastName" style="width:260px;" maxlength="50" value=""> </td> </tr> And the CSS: tr.bbh_invalid {background-color:#C00;} Felicia over 7 years ago
  • OK. Sorted it I THINK. The problem is that I needed to also place a background colour on the table and td for example: .bbh_Content table .bbh_Plain tr.bbh_invalid td { background-color:#090; } Felicia over 7 years ago
  • My guess would be that the td's also had a background color, so the tr background color wasn't showing through. This would also be why setting one would fix it. Might want to check it out in Firebug to see. Ktash over 7 years ago
  • Thanks so much for pointing that out. Very observant and that was the problem. Phew! Thanks very much for your valuable help. :-) Felicia over 7 years ago