Page 1 of 1

CSS and first option

Posted: Mon Nov 14, 2011 12:47 pm
by Lonestarjack

Code: Select all

<style>
.red{color:red}
</style>
<?php
    $query="select recipe, name from recipies_names order by name";
    $result=mysql_query($query);
	if (!$result) {die('Invalid query: ' . mysql_error());}
	$number=mysql_num_rows($result);
?>
<select size="1"  class="red" onchange="set_Cookie('recipe',this.value,1);">
	<option id="selected_recipe"  name="selected_recipe" value="0" >Select A Recipe</option>
<?php
	echo "<p></p>";
	while($row = mysql_fetch_array($result)) {
		$recipe = $row['recipe'] ;	
		$name   = $row['name'] ;	
	 	echo "<option value=\"$recipe\">$name</option>\n";
		 }
 ?>
</select>
This works in IE but not FF, OP, or Chrome.
I have tried using jquery with option:first.

Re: CSS and first option

Posted: Mon Nov 14, 2011 12:52 pm
by Celauran
What works, exactly? What is the expected behaviour? What is happening instead?

Re: CSS and first option

Posted: Mon Nov 14, 2011 1:01 pm
by Lonestarjack
Should be:
<select size="1" onchange="set_Cookie('recipe',this.value,1);">
<option class="red" id="selected_recipe" name="selected_recipe" value="0" >Select A Recipe</option>

The idea is to have the first (non Selectable option) option in red and all the rest in black.
Instead I get all black options except in IE.

Re: CSS and first option

Posted: Mon Nov 14, 2011 1:21 pm
by Celauran
Try this:

Code: Select all

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Debug</title>
        <style type="text/css">
            select,
            .red
            {
                color: red;
            }
            option
            {
                color: black;
            }
        </style>
        <script type="text/javascript">
            function setColor()
            {
                foo = document.getElementById('foo');
                if (foo.selectedIndex == 0)
                {
                    foo.style.color = 'red';
                }
                else
                {
                    foo.style.color = 'black';
                }
            }
        </script>
    </head>
    <body>
        <select id="foo" name="bar" onchange="setColor();">
            <option class="red" value="">Select an Option</option>
            <option value="1">1</option>
            <option value="1">2</option>
            <option value="1">3</option>
            <option value="1">4</option>
            <option value="1">5</option>
            <option value="1">6</option>
        </select>
    </body>
</html>

Re: CSS and first option

Posted: Mon Nov 21, 2011 5:46 am
by Esteban11
Is the select wrapped in a <label> like the other fields? I see this all the time:

<label> I am the REAL label <input name="i-am-not-a-label"></label>

I don't know why it's prevalent, but should be

<p><label for="some-field"> I am the REAL label</label> <input name="i-am-not-a-label" id="some-field"></p>

Try that, it may be the culprit (if it's not, at least it will be correct . . . ) A label is an accessibility tool that when focused places the focus into the field with which it's associated.