#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Posts
    62
    Rep Power
    12

    Setting SELECT form object styles using CSS


    Can anyone tell me how to set the style of the Select form object using CSS? Or tell me that my problem is with Mozilla.
    I'm using Mozilla 0.9.9 in Redhat Linux, and I'm trying to shrink a dropdown menu by reducing the size of the font. Now I can change the size of the fonts and their background colours and everything in the menu itself, but I want to know if there is any way to do it to the default box, the one before you click the little arrow. Changing the font-size seems to work a bit (the box shrinks) but the text seems to stay the same size and the background won't change colour or anything. I would add a screenshot, but GIMP can't take screenshots with the menu open and I can't get access to a Windows computer to take a screenshot from there.

    code samples:
    HTML:
    PHP Code:
    <select class="smallblue">
    <
    option class="smallerred" value="1">option 1</option>
    <
    option value="2" class="smallerred"option 2</option>
    </
    select
    And the css:
    PHP Code:
    .smallbluefont-size:10ptbackground-color:#ccccff}
    .smallerredfont-size:8ptbackground-color:#ff6666} 
    That code should produce a pale blue dropdown menu, at 10point text, and when the menu drops down each option should be 8point text with a red background. Now the dropdown menu does display at 8pt on red for me, but although the menu box shrinks as if its 10pt text, the text isn't 10pt, and the background doesn't change. Anyone know how to fix it? or whether it is just Mozilla 0.9.9?

    Thanks
  2. #2
  3. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Apr 2003
    Location
    Italy, EU
    Posts
    517
    Rep Power
    12

    Re: Setting SELECT form object styles using CSS


    To resolve the problem of the background it's sufficient to define the smallblue class for another option without value but with the property SELECTED... the background color is a property of the OPTION object:
    Code:
    .smallblue{ font-size:10pt; background-color:#ccccff}
    .smallerred{ font-size:8pt; background-color:#ff6666}
    
    
    <select>
    <option class="smallblue" selected>
    <option class="smallerred" value="1">option 1</option>
    <option class="smallerred" value="2"> option 2</option>
    </select>
    About the problem of the font size, the size is a property of the SELECT object so I don't believe it's possible to have two or more different sizes inside the same drop down menu.
    Cheers, Dave
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    May 2003
    Posts
    1,014
    Rep Power
    15
    In my Mozilla (five days old), the text and background color of the unopened selectbox is as you intended (it shows as ccccff, 10pt).
    If I open it, the text in the opened box is smaller, and so is the background color.

    To shrink the unopened selectbox, consider setting a specific style="width:20px" to the selectbox.

    About the problem of the font size, the size is a property of the SELECT object so I don't believe it's possible to have two or more different sizes inside the same drop down menu
    This is simply not true. The following selectbox is rendered with two different fonts, sizes and text colors (in Mozilla).
    Code:
    <select style="font-size:24pt;color:red;font-family:courier;">
    <option style="font-size:24pt;color:red;font-family:courier;">bigredcourier</option>
    <option style="font-size:12pt;color:yellow;font-family:verdana;">smallyellowverdana</option>
    </select>
    Mozilla 0.9.9 is like a year old. A lot has happened in that time. It's worth an upgrade.
    And by the way, there are more screendump programs than the Gimp (I have xwd and a gnome-dump in my SuSE based distribution).

    Hope this helps,
    Jeroen
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Posts
    62
    Rep Power
    12
    OK, thanks Basically and aincient Mozilla problem then I have actually installed the new Mozilla, but my shortcut still points to the old one, and my only other option is NN4.79 (both that and the old Mozilla are just what came with Redhat) but its kinda useful because the older browsers are the ones most likely to have problems.
    But if Mozilla 0.9.9 is bad, I have installed Win98 through VMWare so that I can run it in Linux without rebooting a dual-boot and its staying on IE4.7
    As for the screendump programs, I guess there probably are, I know there are loads of programs, but I think I need a list of every single program in Redhat and what it does
    And magma, "size" as a Select property is the number of lines to display, so size="4" would give you a box four rows high with a scrollbar. As for the different sized text, as jerom said, it can be done, I've managed that already (it was just that the unopened part wasn't changing size but the rest was)
  8. #5
  9. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Apr 2003
    Location
    Italy, EU
    Posts
    517
    Rep Power
    12
    IBBoard, about the size as property of the SELECT object I know what it is... I was refferring to the font size so I thought it could be considered implicit.
    jerom, I am using IE6 and in this browser once you've defined the font family and size as style properties of the SELECT object it's not possible to change anything but the color in the OPTION objects. In fact using your example, I see both the options as courier 24pt fonts... the only difference in that the first is red and the other one is yellow.
    I've tried to use it only in IE6, but tonight I'll try also in Netscape7.01

    Dave
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Posts
    62
    Rep Power
    12
    Originally posted by magma
    IBBoard, about the size as property of the SELECT object I know what it is... I was refferring to the font size so I thought it could be considered implicit
    ....
    OK, sorry about that

IMN logo majestic logo threadwatch logo seochat tools logo