Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Member Arkymedes's Avatar
    Join Date
    Jun 2007
    Location
    Lons-le-Saunier, France
    Posts
    65
    Member #
    15389
    Liked
    1 times
    Hi ppl, is there a way to css style the "selected" option from a list?

    It's like, I have a country list in a drop down box selection, with a fixed font-size of 10px. But this size only applies to the ones that are not selected. Once you select any option, the size becomes different.

    Is there a solution for that?

    Thanks in advance!

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    I experimented a couple of minutes ...
    I'm only able to affect color, nothing else:

    <html>
    <body>
    <select name="test">
    <option>Item1</option>
    <option style="background-color: #c00000; color:#fff;">Item2</option>
    <option>Item3</option>
    <option>Item4</option>
    <option>Item5</option>
    <option>Item6</option>
    <option>Item7</option>
    <option>Item8</option>
    </select>
    </body>
    </html>


  4. #3
    Member Arkymedes's Avatar
    Join Date
    Jun 2007
    Location
    Lons-le-Saunier, France
    Posts
    65
    Member #
    15389
    Liked
    1 times
    Hi!

    I mean, I want only to style the "selected" portion of the option list.

    Is there a class or attribute definition in CSS for that?

    Something that looks like

    option selected {
    font-size: 10px;
    }

    This is a real example from my code:
    HTML Code:
    <select class="input_country" name="country">
         <option value="" selected="selected">--- Choose ---</option>
         <option value="EST">Eesti</option>
         <option value="FIN">Suomi</option>
         <option value="RUS">Russia</option>
         <option value="KVO">Alien Passport</option>
         <option value="S">Sweden</option>
         <option value="A">Austria</option>
         <option value="F">France</option>
    </select>
    Thanks!

  5. #4
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    HTML Code:
    <html>
    
    <head>
    
    <title>CSS styled forms</title>
    
    <style type="text/css" media="all">
    
    .blue_style
       {
    	color: white;
    	background-color: blue;
       }
    
    .red_style
       {
    	color: yellow;
    	background-color: red;
       }
    
    </style>
    
    </head>
    
    <body>
    
    <form name="test" action="" method="post">
    
    <select name="country">
         <option value="" selected="selected">--- Choose ---</option>
         <option value="EST">Eesti</option>
         <option value="FIN" class="blue_style">Suomi</option>
         <option value="RUS">Russia</option>
         <option value="KVO">Alien Passport</option>
         <option value="S" class="red_style">Sweden</option>
         <option value="A">Austria</option>
         <option value="F">France</option>
    </select>
    
    </form>
    
    </body>
    </html>
    That does not solve your problem, maybe add an event handler to the select and change/give the selected a color etc.

  6. #5
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Why yes, as it turns out, there is a selector for that:
    Code:
    option[selected=selected] {
     /* ... */
    }
    Or:
    Code:
    option[selected] {
     /* ... */
    }
    Unfortunately, IE doesn't support it. So you'll have to go for a Javascript solution based on onChange instead. Yay IE!

    EDIT: I don't actually know, by the way, if this will work with selected elements. It'll only work if the browser sets the selected attribute on the option element, which may well not be the case. That is, in general, the way to select on attribute values other than the class and id attributes. It's pretty cool, except for the part where IE doesn't support it.

  7. #6
    Member Arkymedes's Avatar
    Join Date
    Jun 2007
    Location
    Lons-le-Saunier, France
    Posts
    65
    Member #
    15389
    Liked
    1 times
    I will give it a try and post the results! Thanks!


Remove Ads

Posting Permissions

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

Search tags for this page

css option selected
,
css option unselected
,
css select option selected color
,
css select option style
,
css unselected options
,
html select option selected color style
,

select option css selected

,

select option css style

,
select option selected css
,
select style select option
Click on a term to search for related topics.
All times are GMT -6. The time now is 10:26 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com