Wordpress, Dropdown Selection Menu for Author Profile field - php

Question

Wordpress noob here, After searching for two days without any success!, i'm trying to display a difference color in the front end for each selected option from menu.
I used this code for creating menu inside users profile
<table class="form-table">
<tr>
<th><label for="dropdown">Job Stats</label></th>
<td>
<?php
//get dropdown saved value
$selected = get_the_author_meta( 'user_job_stats', $user->ID ); //there was an extra ) here that was not needed
?>
<select name="user_job_stats" id="user_job_stats">
<option class="available" value="available" <?php echo ($selected == "available")? 'selected="selected"' : '' ?>>Available</option>
<option class="busy" value="busy" <?php echo ($selected == "busy")? 'selected="selected"' : '' ?>>Busy</option>
</select>
<span class="description">Select Stats.</span>
</td>
</tr>
</table>
And i used this code for displaying them in the front end
<div class="job-stats">
<?php if (!empty(get_the_author_meta('user_job_stats', $curauth->ID))) { ?>
<dt><?php echo $curauth->user_job_stats; ?></dt>
<?php } ?>
</div>
What i'm trying to do is when users selected an option ex:Busy
I want to make the background color of the option " Busy" to be red IN FRONT END
And with option "Available" background color to be green IN FRONT END.
Any help please?

Answer 1

use CSS's pseudo class to style the relevant tags.
<style>
.available:checked { background: green; }
.busy:checked { background: red; }
</style>
<table class="form-table">
<tr>
<th><label for="dropdown">Job Stats</label></th>
<td>
<?php
//get dropdown saved value
$selected = get_the_author_meta( 'user_job_stats', $user->ID ); //there was an extra ) here that was not needed
?>
<select name="user_job_stats" id="user_job_stats">
<option class="available" value="available" <?php echo ($selected == "available")? 'selected="selected"' : '' ?>>Available</option>
<option class="busy" value="busy" <?php echo ($selected == "busy")? 'selected="selected"' : '' ?>>Busy</option>
</select>
<span class="description">Select Stats.</span>
</td>
</tr>
</table>
and for the front-end:
<style>
dt.available { background: green; }
dt.busy { background: red; }
</style>
<div class="job-stats">
<?php if (!empty(get_the_author_meta('user_job_stats', $curauth->ID))) { ?>
<dt class="<?php echo $curauth->user_job_stats ?>"><?php echo $curauth->user_job_stats; ?></dt>
<?php } ?>
</div>