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.