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 13 of 13
  1. #1
    Regular Coder
    Join Date
    Oct 2002
    Posts
    380
    Thanks
    0
    Thanked 0 Times in 0 Posts

    css and <select>

    I'm trying to format select lists with css. I can't seem to get the colors to change. Is this possible? My current css is:
    Code:
    textarea, option, select, input { margin: 0px; border: 0px; background: #e0e6ff; color: #330033;}
    It works as expected on the other form elements, but it doesn't for the select boxes.

    Thanks.

  • #2
    Regular Coder
    Join Date
    Nov 2002
    Location
    Bristol, UK
    Posts
    932
    Thanks
    0
    Thanked 0 Times in 0 Posts
    well, there are two parts to the answer.

    First, you need to specify backgrounf-color in your css, not background. background is for specifying more than one property at once, background-color will let you do what you want.

    Second, most browsers do not actually let you change the border properties of a select box, much like radio buttons and check boxes.

    ::] krycek [::
    ithium | SOAPI | SDP | PTPScript manual
    "ithium is a non-profit webhost, which is pretty much unique. The mission of ithium is to provide free hosting resources for worthwhile and needy non-profit projects, which otherwise may not be able to obtain such facilities. The money from commercial customers goes to maintain ithium's servers and further development."

  • #3
    Regular Coder
    Join Date
    Nov 2002
    Posts
    596
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Using the composite background property is perfectly OK; all newer CSS-capable browsers 'know' which property you want styled by the type of value you specify (same applies to font:, border:, etc). The rules you posted should work - although it doesn't make much sense using both select & option together; typically, option styles are applied in HTML, or using classes applied to individual options. Your text color is so close to the default (black), probably won't notice it. Forget about select borders - and some other attributes - these are system widgets and the, hem, 'options' are limited.

    http://www.outfront.net/tutorials_02...unkyforms1.htm

  • #4
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Mozilla and related browsers (Netscape 6+, K-meleon, Phoenix, Chimera, etc) have no problem styling <select> elements.

  • #5
    Regular Coder
    Join Date
    Oct 2002
    Posts
    380
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I test in moz, and the style I included didn't effect the select elements (except for the font).

  • #6
    Regular Coder
    Join Date
    Nov 2002
    Location
    Bristol, UK
    Posts
    932
    Thanks
    0
    Thanked 0 Times in 0 Posts
    same here, kiwi. I also find that you cannot style scrollbars in moz, which is a big pity

    ::] krycek [::
    ithium | SOAPI | SDP | PTPScript manual
    "ithium is a non-profit webhost, which is pretty much unique. The mission of ithium is to provide free hosting resources for worthwhile and needy non-profit projects, which otherwise may not be able to obtain such facilities. The money from commercial customers goes to maintain ithium's servers and further development."

  • #7
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Originally posted by krycek
    same here, kiwi. I also find that you cannot style scrollbars in moz, which is a big pity

    ::] krycek [::
    Scrollbars are part of the program, not the webpage. Pages should not be able to affect anything other than itself. Therefore, scrollbar coloring is typically a bad idea, in terms of UI.

    One could argue form widgets are also part of the program, but web pages can control them, so it is debatable whether or not you should be able to style them. But Mozilla allows the most extensive styling of form elements of any browser, since it implements it own instead of the OS's.

  • #8
    Regular Coder
    Join Date
    Oct 2002
    Posts
    380
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm not so worried about the scrollbars (I never am, I hate styling them) -- it was the borders and colours that I wanted to change. It's not a critical problem, but it would be nice, if I could.

    I used select and option together, because I wasn't sure which was the correct selector.

  • #9
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts

  • #10
    Senior Coder
    Join Date
    Jul 2002
    Posts
    1,628
    Thanks
    0
    Thanked 0 Times in 0 Posts
    um, works for me to in ie6
    margin and border dont effect IE for a select which is what to specify in the css.

    Moderator: General web building

    Get out from under them, resist and multiply.
    Get out from under precipice and see the sky.

  • #11
    Regular Coder
    Join Date
    Sep 2002
    Location
    Louisiana
    Posts
    576
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i use mozilla jkd, i understand what you are saying, but can mozilla style textarea scrollbars? they are not part of the program.

  • #12
    Senior Coder
    Join Date
    Jul 2002
    Posts
    1,628
    Thanks
    0
    Thanked 0 Times in 0 Posts
    technically it is part of the program, any scrollbar

    Moderator: General web building

    Get out from under them, resist and multiply.
    Get out from under precipice and see the sky.

  • #13
    Regular Coder
    Join Date
    Oct 2002
    Posts
    380
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The problem is the "border:0px" -- it seems that this isn't valid for select/option style. But you can set a border that's not zero.

    Thanks for the help.


  •  

    Posting Permissions

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