Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    What is the selector for the first option

    I want the selector for the option that appears in the select box when size = 1.
    The $option:first-child seems to work in IE, but not FF, Opera or Chrome.

    Code:
    <script>
      	jQuery(function() {
        	$("option:first-child").addClass("red");
    	});
    </script>
    <style>
    	.red { color:red;}
    </style>
    ..........
    <select size="1" >
    	<option name="selected_recipe">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>
    Last edited by VIPStephan; 03-08-2012 at 01:04 AM. Reason: fixed code BB tags

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    947
    Thanks
    0
    Thanked 130 Times in 129 Posts
    You are doing it the right way!

    but IE have (as always *sigh*) it own ways to do things.

    All other browser follow the same standard rule:
    Unstyled child element inherits the style from it's parent.

    But here IE does it the other way around. - Sort of
    The parent "exherits" (best word I could find ) the color from it's selected child.
    And all other stylings of the <option> tags themselves is completely ignored.

    When you color-style the <select> in IE, the color applies only to its options, but not to the <select> it self.
    And then <select> exherits it color from its selected child.
    Code:
    <style>
    .blue { color:blue;font-size:larger;font-weight:bold}
    .red { color:red;font-size:medium;}
    .black { color:black;font-size:medium;font-weight:normal}
    </style>
    <select size="1" class=blue>
    <option name="selected_recipe" class="red">OptionText</option>
    <option name="selected_recipe" class="black">OptionText</option>
    </select>
    would, following that standard rules that other browsers than IE uses, give:
    Code:
    | OptionText |▼|
    OptionText
    OptionText
    now matter which option is currently selected.

    But in IE it would give
    Code:
    | OptionText |▼|
    OptionText
    OptionText
    and
    Code:
    | OptionText |▼|
    OptionText
    OptionText
    when first and second option is selected respectively.

    With some javascript you can make the other browsers imitate the IE way, but there is no way that you can make IE display it the standard way

    Do ask me why IE have chosen to use this odd inherit/exherit behaviour for dropdown menus.
    Last edited by Lerura; 03-07-2012 at 11:25 PM.

  • #3
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Code:
    <select size="1" >
    	<option name="selected_recipe">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";
    		 }
    1) why have you got a <p> between the <options>s?. It is not valid html

    2) Which first <option> do you really mean? The "Select A Recipe" or the first option in the loop?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •