[Help] Need help with css. How to style a select box depending on the value chosen

Been beating my head against a stupid problem for way to long. Hoping somebody can just give me the answer. I have character sheet that I am modifying that was originally the pathfinder neceros sheet. It has a section of checkboxes,and when a checkbox is selected it turns blue. I added a few dropdown lists to this section as well. It would be nice if when these dropdown lists do not have a value zero - none. They turned blue. html <span class="sheet-table-data sheet-left" style="width:20%;">   <div class="sheet-labeledDropdown" title="@{condition-Darkness}"><label><b>Vision</b></label>     <select title="-2/-4 Penalty to all sight based tests due to Darkness, Blindness or Dazzling." name="attr_condition-Darkness">         <option value="0" selected><b title="No Darkness Blindness or Dazzled impact on signt based actions."> None</option>         <option value="-2"><b title="-2 Penalty to all sight based tests due to Darkness, Blindness or Dazzling."> Partial</option>         <option value="-4"><b title="-4 Penalty to all sight based tests due to Darkenss, Blindness or Dazzling."> Full</option> </select>     </div>     </span> I thought that the following css ought to do something (if not work, at least do something) .sheet-labeledDropdown select[value="0"] { background-color: #4a6486;color: #FFF; } But nothing is happening when I change the value of the dropdown box. So anyway, can anybody give me any pointers on what I can do from here to get back on the right track? Thanks.

I should probably just wait for Brian to answer this one, but I'm going to take a crack at and expect Brian clean up my mess when I screw up. ;) First things first...Drop Down menus are horrible to style (i.e. I haven't really found a way to do that), and the easiest way to style drop downs is to make check boxes or radio buttons look like drop downs.  the CSS Wizardry thread discusses how to do that. Secondly, it looks like you're trying to have a parent styled based on a child's value, which I don't believe can be done. So, here's what I came up with... HTML: <input class='sheet-selectTest' type='checkbox' name='attr_condition-Darkness' value='0' style='display:none;' checked /> <div class='sheet-labeledDropdown' style='height: 28px; width:20%;'> <select title="-2/-4 Penalty to all sight based tests due to Darkness, Blindness or Dazzling." style='width:100%;' name="attr_condition-Darkness">         <option value="0" selected><b title="No Darkness Blindness or Dazzled impact on signt based actions."> None</option>         <option value="-2"><b title="-2 Penalty to all sight based tests due to Darkness, Blindness or Dazzling."> Partial</option>         <option value="-4"><b title="-4 Penalty to all sight based tests due to Darkenss, Blindness or Dazzling."> Full</option> </select> </div> CSS: .sheet-selectTest:checked + div.sheet-labeledDropdown {   border: 1px solid #4a6486; } You'll note that I had to define the size of the div so that the border extended out past the dropdown itself.  Then, I created a checkbox with the exact same name as the drop down menu with the value=0. Then when the drop down has "None" selected, the checkbox will also be checked. Then the CSS would give the div the blue border surrounding the drop down. Here's what it looks like when "None" is selected: And here's what it looks like when something other than "None" is selected: Brian may have a better solution, but when using drop downs you typically have to work around it. EDITED: Added pictures.

With pure CSS, it is not possible to style a select based on the chosen option. As G V mentioned, it is also not possible to style a parent element based on selectors of a child. There have been some attempts to add a "parent selector" to the CSS specification, but because of the way CSS is engineered, a parent selector significantly  damages the performance of rendering the page, which is the primary reason why it has not been included. All that said, G V's solution is a creative one. You could probably make the select's background translucent as well, if you wanted the styled div to fill in a color rather than just use the border.

Thank you both very much! I ended up using an extremely close variant of your approach.  For some reason I could not get the actual dropdown itself to style at all, but I simply added the labels back in and styled them.  I ended up with the following. As you can see, every checkbox that is checked and every dropdown that is not set to None has the label blue. The html I ended up with is <span style="width:20%;"> <input class='sheet-selectTest' type='checkbox' name='attr_condition-Cover' value='0' style='display:none;' checked /> <div class='sheet-labeledDropdown'><label><b>Cover</b></label> <select title="@{condition-Cover} +2/NA Bonus to Physical and Mysital defenses." style='width:100%;' name="attr_condition-Cover"> <option value="0" selected><b title="No bonus due to cover."> None</option> </select>      </div>              </span> All of which seems to be needed to get everything right.  the css is: .sheet-labeledDropdown { display: table; width: 90% } .sheet-labeledDropdown label { display: table-cell; width: 1px; white-space: nowrap } .sheet-labeledDropdown select { width: 100%; } .sheet-selectTest:not(:checked) + div.sheet-labeledDropdown label { background-color: #4a6486; color: #FFF; } I am not certain that some of the css could not be eliminated, but what is here does do exactly what I want! Thanks again. P.S. Just so that I am sure that I 100% understand what is happening.  I have two controls, both with the exact same attribute. The checkbox is set to display none, so it is being hidden. However when the select control sets to an option that has a value of zero, the checkbox is automatically considered unchecked. If the select control is set to any option that has a non-zero value, it is considered checked. We are doing this because a checkbox is so very much easier to check than a select. The checkbox can also be placed as far up the "tree" as you want. IE: while you can't style a "parent element", the hidden checkbox can be anywhere you want, and you can style child or sibling elements of this hidden checkbox depending on it's value, correct? So with the checkbox, it is simply a matter of checking for (and this part I am not 100% certain I am parsing this correctly) .sheet-selectTest:not(:checked) + div.sheet-labeledDropdown label { It is looking for a class .sheet-selectTest that is not checked, and is followed immediately by a div that has class .sheet-labeledDropdown and that contains a label, and then the label gets it's color set. Correct? Once again, thank you both for your help.

Chris D. said: P.S. Just so that I am sure that I 100% understand what is happening.  I have two controls, both with the exact same attribute. The checkbox is set to display none, so it is being hidden. However when the select control sets to an option that has a value of zero, the checkbox is automatically considered unchecked. If the select control is set to any option that has a non-zero value, it is considered checked. We are doing this because a checkbox is so very much easier to check than a select. The checkbox can also be placed as far up the "tree" as you want. IE: while you can't style a "parent element", the hidden checkbox can be anywhere you want, and you can style child or sibling elements of this hidden checkbox depending on it's value, correct? Based on your code, when the value the value of the select equals 0, then the checkbox is checked, but yes, basically you are correct. Yes, checkboxes are great for using the :checked in CSS. Yep, you got it. Chris D. said: So with the checkbox, it is simply a matter of checking for (and this part I am not 100% certain I am parsing this correctly) .sheet-selectTest:not(:checked) + div.sheet-labeledDropdown label { It is looking for a class .sheet-selectTest that is not checked, and is followed immediately by a div that has class .sheet-labeledDropdown and that contains a label, and then the label gets it's color set. Correct? Correct. I will also mention that this trick only works in roll20.  Outside of roll20 character sheets having a checkbox with the same name as a select wouldn't behave the way it does here.  It works in roll20, because of the way character sheets treat "field names" and stores the value.

G V. said: I will also mention that this trick only works in roll20.  Outside of roll20 character sheets having a checkbox with the same name as a select wouldn't behave the way it does here.  It works in roll20, because of the way character sheets treat "field names" and stores the value. Of course, if you were making a webpage, you could just include JavaScript to do the job even easier. =P

Being driven crazy again and could really use some help if somebody can hit me with the smart stick! I am trying to do something different, but trying to reuse the principles discussed above. I have a number that is being calculated and displayed. I think it would be nice to style the background differently depending on the value. If the value is greater than zero, light green, zero, light blue, less than zero light red. Just so that the user can see at a glance whether they have a bonus or a penalty for that action. As can be seen in the fragment below, first I have an input field where I get one of the numbers used to calculate the field I want styled. The next 3 fields normally have "display:none;" but I took them out so I could see what was going on better. First I have the calculated field  attr_Adjust-TN-Total-calc. This is marshaling the number I want to work with. Then I have two more calculated values  - The one calculated value will have a zero value if the value of  @{Adjust-TN-Total-calc} is zero or less, the other has a zero value if it is zero or more. Then I have two checkboxes that have the exact same name as the last two calculated values. My thought was that the checkboxes that have the same names would then be automatically checked or unchecked depending on those values (as discussed above). Lastly I have the field I want displayed and styled.   <div class="sheet-table-row">         <span class="sheet-table-data sheet-center sheet-label"><input style="width:3em;" title="@{Adjust-TN-Misc}:   Enter any Misc Adjustments to all Target Numbers here." type="number" name="attr_Adjust-TN-Misc" value="0"></span>         <input type="number" name="attr_Adjust-TN-Total-calc"  title="@{Adjust-TN-Total-calc}"  value="0 + @{Adjust-TN-Misc} - abs(@{combatOption-Reserved})" disabled>         <input type="number" name="attr_Adjust-TN-Total-Minus" title="@{Adjust-TN-Total-Minus}" value="(@{Adjust-TN-Total-calc} - abs(@{Adjust-TN-Total-calc} )) / 2"  disabled>         <input type="number" name="attr_Adjust-TN-Total-Plus"  title="@{Adjust-TN-Total-Plus}"  value="(@{Adjust-TN-Total-calc} + abs(@{Adjust-TN-Total-calc} )) / 2"  disabled> <input class="sheet-MinusTest" type="checkbox" name="attr_Adjust-TN-Total-Minus" style="display:none;" value='1' checked  />         <input class="sheet-PlusTest"  type="checkbox" name="attr_Adjust-TN-Total-Plus"  style="display:none;" value='1' checked />         <div class="sheet-table-data sheet-center sheet-label sheet-Minus-Plus">             <input name="attr_Adjust-TN-Total" title="@{Adjust-TN-Total}   This is the total adjustment to all target numbers from Delayed Actions and Misc Adjustments." type="number" value="@{Adjust-TN-Total-calc}"  disabled>         </div> Target Number   </div> So I have a problem. The checkboxes are not changing their "checked" status when the linked calculated field (that has the same name as them) changes.  This technique seems to work fine in the solutions provided in this thread a few weeks ago, but it is not working at all as I have it now. I have tried every combination of value, checked, disabled, and display:none I can think of but, it does not work.  Looking at the element in Chrome developer tools, if I have "checked" in the definition (as I do above), then it is always checked. Otherwise it is always unchecked. My understanding is that when the field that has the exact same name has a non-zero value, the checkbox should check itself and uncheck itself when the value changes to zero. What am I doing wrong there? the CSS seems to be working fine when I do have the checkboxes displayed and I manually set the checks. .sheet-Minus-Plus input[type="number"]:disabled {     background-color: #F0F0FF; } .sheet-Minus-Test:checked ~ .sheet-Minus-Plus input[type="number"]:disabled {     background-color: #FFE0E0; } .sheet-Plus-Test:checked ~ .sheet-Minus-Plus input[type="number"]:disabled {     background-color: #E0FFE0; } So it looks like the only problem is that I can't get the checkboxes to autocalculte.  Any help would be most appreciated.

Chris D. said: Being driven crazy again and could really use some help if somebody can hit me with the smart stick! I am trying to do something different, but trying to reuse the principles discussed above. I have a number that is being calculated and displayed. I think it would be nice to style the background differently depending on the value. If the value is greater than zero, light green, zero, light blue, less than zero light red. Just so that the user can see at a glance whether they have a bonus or a penalty for that action. Ok, I can't say for certain, but I don't believe this works so well with Calculated fields, because in the HTML those values aren't really the value. I could be wrong, but I'm pretty certain that's the issue.  Of course, this is where I would totally defer to Brian, because he's a wizard.

Ah, I have been wracking my brain to try to figure out how this case was different from the one above, and was not seeing the obvious. You are saying that setting a checkbox to have the same name as a Select, works, and the checkbox will change checked state depending on whether the selected option has a value of zero or not, but setting a checkbox to have the same name as a calculated field does not work? Does anybody know of any trick to make such a thing work? Or to achieve a similar result using a different method?

The main problem is that the value of the calculated field is not , for example, "5". The value of the calculated field as far as the character sheet system is concerned is "floor((@{strength} - 10) / 2)" or whatever the equation is, and that's never changing.

Of course, thank you, that makes perfect sense. So I guess there is no workaround that would make this trick work? Or any other trick that would achive the same result in a reasonable amount of code?

Not one that I can think of. On the other hand, I hadn't thought of G V's trick with the select dropdown. I may be considered pretty good with CSS around here, but I don't know everything. =)