Jump to content

Conditional formatting of dropdown menu item


Recommended Posts

Is it possible to format the menu items in the drop down box? Below is the code used at the moment. What I would like is to make Yes = Green, No = Red and N/A stay black. I tried using the class and style setting on the inline code but had no luck. Can anyone please shed some light on how I would go about this?

<select name="ob_admin_quals" class="standard_left" id="ob_admin_quals">
    <option value="Yes"<?php echo($ob_admin_quals == 'Yes') ? ' selected' : '';?>>Yes</option>
    <option value="No"<?php echo($ob_admin_quals == 'No') ? ' selected' : '';?>>No</option>
    <option value="N/A"<?php echo($ob_admin_quals == 'N/A') ? ' selected' : '';?>>N/A</option>
Link to comment
Share on other sites

Pro tip: When you're not sure whether an element can be styled, a quick Google search helps. The answer in this case is, you can't.


What you can do is reimplement the entire menu with JavaScript (there are libraries for this). Or, if you're only interested in a specific browser, look for CSS extensions in this browser. Both approaches have serious drawbacks in terms of compatibility and accessibility.


The third option would be to use radio buttons with labels instead. Then you can set colors using standard CSS.

Link to comment
Share on other sites

Aside from your question, where is $ob_admin_quals coming from? If from a database, you are either storing it incorrectly which would also indicate the rest of your database is probably wrong or you are not using the unique key . That is a pretty "dirty" block of code, meaning it could be cleaned up quite a bit. You have about 75% more code than you need.

Edited by benanamen
Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.