simpli Posted April 5, 2009 Share Posted April 5, 2009 Hi, I have a radio button that my server has flagged in error. I want that when a radio button is identified as such, its background turns red. I have added a ternary operator that verify if the field has been returned in error and if it does it adds the class error to it. In my CSS the class error is identified with a red background. That should be enough to color my radio button's background red right? Further more I have added a radio.error rule so that any radio button who's in error has his background turned red. I also wanted to circle it that's why I created this second rule. As I understand CSS my first rule should have turned the background red. My problem is the background of the radio button doesn't turn red. I used a similar rule on a text field and it works fine. You can verify with sample code below. Your help is welcome and thanks and advance. <html><head><title>Page des poolers</title><style type="text/css"> .error{ background-color: red; } radio.error{ background-color: red; } </style> </head> <body> <b>Entrez vos choix pour la premiere ronde</b></br><fieldset><input type="hidden" name="PHPSESSID" value="0aef40012ce422c3c40eb6eea79940db" /><legend>East</legend> <label for="m_1vs8East_1"><input name="m_1vs8East" class="error" type="radio" id="m_1vs8East_1" value="Boston">Boston</label> <label for="m_1vs8East_2"><input name="m_1vs8East" class="error" type="radio" id="m_1vs8East_2" value="Buffalo">Buffalo</label> <select name="nbmatch_1vs8East"><option selected="selected">4<option>5<option>6<option>7</select></br> <label for="m_2vs7East_1"><input name="m_2vs7East" class="error" type="radio" id="m_2vs7East_1" value="Washington">Washington</label> <label for="m_2vs7East_2"><input name="m_2vs7East" class="error" type="radio" id="m_2vs7East_2" value="New York Rangers">New York Rangers</label> <select name="nbmatch_2vs7East"><option selected="selected">4<option>5<option>6<option>7</select></br> <ol> <li><input name="player_9" id="player_9" type="text" size="30"></li></br> <li><input name="player_10" id="player_10" class="error" type="text" size="30"></li></br> </ol></fieldset><fieldset class="six" style="width:450px"><input type="hidden" name="PHPSESSID" value="0aef40012ce422c3c40eb6eea79940db" /> <legend>Erreurs</legend>Votre joueur #10 n'a pas ete choisi!<br />Vous devez choisir un gagnant pour l'affrontement 1 Vs 8 Est!<br />Vous devez choisir un gagnant pour l'affrontement 2 Vs 7 Est!<br /></fieldset></form> </br> </body></html> Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted April 5, 2009 Share Posted April 5, 2009 radio buttons and check boxes are notoriously difficult to style. your most reliable method is replacing them by a faux radio/check box image overlay controlled by javascript (not my favorite but many do do this). as an alternative you could style the label for that input and have the text turn red Quote Link to comment Share on other sites More sharing options...
Yesideez Posted April 6, 2009 Share Posted April 6, 2009 Using Javascript over something like this to apply styles and handling is best avoided completely. May work on your machine but anyone who has Javascript disabled it'll render sections of your form useless. Quote Link to comment Share on other sites More sharing options...
Axeia Posted April 6, 2009 Share Posted April 6, 2009 Using Javascript over something like this to apply styles and handling is best avoided completely. May work on your machine but anyone who has Javascript disabled it'll render sections of your form useless. Ever heard of "unobtrusive javascript" ? CSS alone isn't enough to style form elements across all browser, many tried.. all failed. Via javascript you can make anything behave like a form element, so that way you can (for any browser with javascript enabled). Yesideez does make a point, if you use javascript for styling make the javascript change the document to how you'd like it to be.. don't force users to need to have javascript enabled to be able to use the form. Google for it and you're bound to find some cut and paste solutions. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.