SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: CSS & <select>

  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2001
    Location
    Wolverhampton, UK
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS & <select>

    is it possible to make a <select> box that hasn't got the '3d' bits, and you can choose the highlight colour of the selection...

    i got:

    Code:
    select{ 
    font-family : Verdana; 
    font-size : 10px; 
    color : #000000; 
    background-color : #3399cc; 
    border: 1px solid #000000; 
    }
    but that only makes the background #3399CC and the drop down bit have a border of 1 that's black + solid....

    please help,
    beachball

  2. #2
    We like music. weirdbeardmt's Avatar
    Join Date
    May 2001
    Location
    Channel Islands Girth: Footlong
    Posts
    5,882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try:

    Code:
    select { border-color : (thesamecolourassurroundingstuff); color : #000000; background-color : (thecolouryouwant);}
    .anotherstyle {color: (thehighlightcolour);}
    then you can go:

    Code:
    <select class="anotherstyle">
    That should do it. I hope!
    I swear to drunk I'm not God.
    Matt's debating is not a crime
    Hint: Don't buy a stupid dwarf Clicky

  3. #3
    Victory shall be mine tubedogg's Avatar
    Join Date
    Mar 2001
    Location
    Medina, OH
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Currently you cannot make any changes to the "3D" appearance of a select menu (as you can with textareas, buttons, and text boxes). You can, however, change the colors of the options listed (background colors and foreground colors.
    Kevin

  4. #4
    SitePoint Guru
    Join Date
    Sep 1999
    Location
    Singapore
    Posts
    854
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can apply styles on <SELECT> in Mozilla.

  5. #5
    SitePoint Zealot superbrava's Avatar
    Join Date
    Aug 2001
    Location
    Indianapolis, IN
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i am having the same problems as you are.... the <select> is the only thing that is bugging the crap out of me. i want to change the scroll bar color (including arrow)... like i can with a browser scroll bar, and get rid of that nasty 3D border, and that aweful highlight... one thing that i can do though is take away that dotted line when you click on a form option.. like a button or select menu.... it's a small javascript. if interested, let me know, and i'll dig it up for you.
    Steve v3.2.2 running on LocalSuck port 80

  6. #6
    SitePoint Enthusiast smashway's Avatar
    Join Date
    Sep 2001
    Location
    Lausanne, Switzerland
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    superbrava, could you hook everyone up with that script? like pasting it here? Would be useful for when someone searches it
    Smash

    Check this thread and help me: click here!

  7. #7
    SitePoint Zealot superbrava's Avatar
    Join Date
    Aug 2001
    Location
    Indianapolis, IN
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what script? the CSS code to alter forms??
    Steve v3.2.2 running on LocalSuck port 80

  8. #8
    SitePoint Enthusiast smashway's Avatar
    Join Date
    Sep 2001
    Location
    Lausanne, Switzerland
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by superbrava
    one thing that i can do though is take away that dotted line when you click on a form option.. like a button or select menu.... it's a small javascript. if interested, let me know, and i'll dig it up for you.
    This one...
    Smash

    Check this thread and help me: click here!

  9. #9
    SitePoint Wizard johntabita's Avatar
    Join Date
    Mar 2001
    Location
    In a big, big house, with lotsa lotsa room
    Posts
    1,060
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Remove Dotted Line JS:

    <select name="select" onFocus="if(this.blur)this.blur()">

    Also removes dotted lines on links:
    <a href="mypage.html" onFocus="if(this.blur)this.blur()">Link #1</a>


Bookmarks

Posting Permissions

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