SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 29

Hybrid View

  1. #1
    SitePoint Zealot c-pr0mpt's Avatar
    Join Date
    Jun 2001
    Location
    Michigan
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing the scroll bars in forms

    Hi on my site I am using a form on a page. You can see it here. As you can see the scrollbars in the form fields are the color those set on the users computer. How do I change these to colors I choose?

    Is it just another code to add to the style part I have already added?

    Thank you.
    ravio.com
    Email: corey@ravio.com

  2. #2
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,123
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Code:
    	scrollbar-arrow-color: white;
    	scrollbar-face-color: gray; 
    	scrollbar-shadow-color: light gray; 
    	scrollbar-darkshadow-color: gray; 
    	scrollbar-track-color: #e2e2e2;
    	scrollbar-highlight-color: white;
    	scrollbar-3dlight-color: gray;
    You don't need to use them all, but these are your options
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  3. #3
    Captain Internet neil's Avatar
    Join Date
    Jun 2001
    Location
    n.ireland
    Posts
    333
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you want to see which part each of those attributes controls on the scroll-bar, visit http://wsabstract.com/howto/scrollbarcolor.shtml.
    neil - Geocities, the trailer park of the web
    .<.<.<.<.<.<.<.<
    WEB[retype.net] + [guff.org]
    ICQ[273981] AIM[neiim]

  4. #4
    SitePoint Zealot c-pr0mpt's Avatar
    Join Date
    Jun 2001
    Location
    Michigan
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your help. I was unaware that the style added in the header changed the form scrollbars as well as the pages scrollbar.

    I should have checked first. lol

    Thanks again!
    ravio.com
    Email: corey@ravio.com

  5. #5
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,123
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    So either setup classes or write the CSS inline. This will mean that the colours aren't applied to the page.

    Also, a:

    INPUT

    {
    //css
    }

    should work quite nicely as well.
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  6. #6
    SitePoint Zealot c-pr0mpt's Avatar
    Join Date
    Jun 2001
    Location
    Michigan
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was wrong. lol

    When you say add CSS in line, what is the CSS code I should be adding? (Sorry, new to CSS).

    I am sorry if I come off clueless. Just never used CSS before.
    ravio.com
    Email: corey@ravio.com

  7. #7
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,123
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    in page:

    Code:
    <style type="text/css">
    BODY
    {
    	scrollbar-arrow-color: white;
    	scrollbar-face-color: gray; 
    	scrollbar-shadow-color: light gray; 
    	scrollbar-darkshadow-color: gray; 
    	scrollbar-track-color: #e2e2e2;
    	scrollbar-highlight-color: white;
    	scrollbar-3dlight-color: gray;
    }
    </style>
    inline: (edited, put it all on one line)
    Code:
    <textarea style="scrollbar-arrow-color: white;
    scrollbar-face-color: gray; 
    scrollbar-shadow-color: light gray; 
    scrollbar-darkshadow-color: gray; 
    scrollbar-track-color: #e2e2e2; 
    scrollbar-highlight-color: white; 
    scrollbar-3dlight-color: gray;">
    </textarea>
    inpage specific:
    Code:
    <style type="text/css">
    INPUT
    {
    	scrollbar-arrow-color: white;
    	scrollbar-face-color: gray; 
    	scrollbar-shadow-color: light gray; 
    	scrollbar-darkshadow-color: gray; 
    	scrollbar-track-color: #e2e2e2;
    	scrollbar-highlight-color: white;
    	scrollbar-3dlight-color: gray;
    	color:gray;
    	background-color:gray;
    }
    </style>
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  8. #8
    SitePoint Zealot c-pr0mpt's Avatar
    Join Date
    Jun 2001
    Location
    Michigan
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Once again Jeremy, thank you very much. I appreciate this help.

    Also, thanks for not being annoyed by my cluelessness in CSS.
    ravio.com
    Email: corey@ravio.com

  9. #9
    SitePoint Wizard Aes's Avatar
    Join Date
    Jun 2001
    Location
    Oklahoma
    Posts
    3,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, if you're wanting to put the styles inline, you would do something to the effect of:
    Code:
    <textarea style="scrollbar-arrow-color : white ; scrollbar-face-color : gray ;
    scrollbar-shadow-color : light gray ; scrollbar-darkshadow-color : gray ;
    scrollbar-track-color : #e2e2e2 ; scrollbar-highlight-color : white ;
    scrollbar-3dlight-color : gray ;"></textarea>
    Or using global styles:
    Code:
    <style type="text/css">
    <!--
    textarea.scrollbar { scrollbar-arrow-color : white ; scrollbar-face-color : gray ; 
    scrollbar-shadow-color : light gray ; scrollbar-darkshadow-color : gray ;
    scrollbar-track-color : #e2e2e2 ; scrollbar-highlight-color : white ;
    scrollbar-3dlight-color : gray ; }
    -->
    </style>
    Hope that helps.
    Colin Anderson
    Ambition is a poor excuse for those without
    sense enough to be lazy.

  10. #10
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,123
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    CLUELESSNESS?! NO!!!!!! I take it all back! Learn for yourself!!!

    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  11. #11
    SitePoint Wizard Aes's Avatar
    Join Date
    Jun 2001
    Location
    Oklahoma
    Posts
    3,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Two posts were stuck in while I was typing that!!!

    ::sigh::

    I can never win.

    Colin Anderson
    Ambition is a poor excuse for those without
    sense enough to be lazy.

  12. #12
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,123
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    It's good that you realise this now before you get overly frustrated
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  13. #13
    SitePoint Wizard Aes's Avatar
    Join Date
    Jun 2001
    Location
    Oklahoma
    Posts
    3,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh ho ho ho.

    That was ccccoooolllldddd -- Ice cold.

    You'll get your comeupance Jeremy, just you wait.
    Colin Anderson
    Ambition is a poor excuse for those without
    sense enough to be lazy.

  14. #14
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,123
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    come... wha?
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  15. #15
    SitePoint Zealot c-pr0mpt's Avatar
    Join Date
    Jun 2001
    Location
    Michigan
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    New problem - kinda. lol

    Now if you look I changed the scrolls (thanks to you). But how do I change the scrolls for the drop down lists? And, can I change the color that it highlights the chooses with?


    Sorry to keep asking stuff.
    ravio.com
    Email: corey@ravio.com

  16. #16
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,123
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Well, remember the inline code? Use it for your drop down too
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  17. #17
    SitePoint Zealot c-pr0mpt's Avatar
    Join Date
    Jun 2001
    Location
    Michigan
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried that. It didn't work. I must have done something wrong. lol Man I suck!
    ravio.com
    Email: corey@ravio.com

  18. #18
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,123
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hmm... Aes?!
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  19. #19
    SitePoint Zealot c-pr0mpt's Avatar
    Join Date
    Jun 2001
    Location
    Michigan
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What did I do wrong here?

    Code:
    <select style="background:#495C49; border: 1px solid #000000;" style="scrollbar-arrow-color: black;
    scrollbar-face-color: gray;
    scrollbar-shadow-color: light gray;
    scrollbar-darkshadow-color: gray;
    scrollbar-track-color: #e2e2e2;
    scrollbar-highlight-color: white;
    scrollbar-3dlight-color: gray;"
    size="1" name="SERVICENEEDED">
    <option selected>.: Choose One :.</option>
                                                <option>Graphic Design</option>
                                                <option>Web Design</option>
                                                <option>Single Graphics</option>
                                                <option>BB Installs</option>
                                                <option>BB Server Moves</option>
                                                <option>BB Customization</option>
                                                <option>Graphics to Code</option>
                                                <option>Site Logo</option>
                                                <option>Company Logo</option>
                                                <option>Support</option>
                                                <option>Other</option>
                                              </select></td>
    I did something wrong as its not working.
    ravio.com
    Email: corey@ravio.com

  20. #20
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,123
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    nothing that I can see... show me the html page so I can see the result?
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  21. #21
    SitePoint Zealot c-pr0mpt's Avatar
    Join Date
    Jun 2001
    Location
    Michigan
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Same page as up above. I dont get it lol Im lost.
    ravio.com
    Email: corey@ravio.com

  22. #22
    SitePoint Wizard Aes's Avatar
    Join Date
    Jun 2001
    Location
    Oklahoma
    Posts
    3,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm ... why do you have two style=" " declarations? Change it to:
    Code:
    <select style="background:#495C49; border: 1px solid #000000; scrollbar-arrow-color: black;
    scrollbar-face-color: gray; scrollbar-shadow-color: light gray;
    scrollbar-darkshadow-color: gray; scrollbar-track-color: #e2e2e2;
    scrollbar-highlight-color: white; scrollbar-3dlight-color: gray;"
    size="1" name="SERVICENEEDED">
    <option selected>.: Choose One :.</option>
    <option>Graphic Design</option>
    <option>Web Design</option>
    <option>Single Graphics</option>
    <option>BB Installs</option>
    <option>BB Server Moves</option>
    <option>BB Customization</option>
    <option>Graphics to Code</option>
    <option>Site Logo</option>
    <option>Company Logo</option>
    <option>Support</option>
    <option>Other</option></select>
    You only need to specify the styles in one style declaration.
    As for the coding -- it looks valid to me as well....
    Colin Anderson
    Ambition is a poor excuse for those without
    sense enough to be lazy.

  23. #23
    SitePoint Zealot c-pr0mpt's Avatar
    Join Date
    Jun 2001
    Location
    Michigan
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just fixed that Aes. Thanks

    This is baffling me.
    ravio.com
    Email: corey@ravio.com

  24. #24
    SitePoint Wizard Aes's Avatar
    Join Date
    Jun 2001
    Location
    Oklahoma
    Posts
    3,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, as a result of the circumstances, I'm going to conclude that the dropdown menu's aren't something you can modify ... although it really doesn't seem that easy an explanation to me.... Because I know you can modifty the background color using CSS -- I've seen it before....
    Colin Anderson
    Ambition is a poor excuse for those without
    sense enough to be lazy.

  25. #25
    Captain Internet neil's Avatar
    Join Date
    Jun 2001
    Location
    n.ireland
    Posts
    333
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Prove me wrong if you want, but I don't think you can change the colour of the scrollbar inside the drop-down menu (combobox).


    Also, instead of having all that css inside your select tag...
    style="background:#495C49; border: 1px solid #000000; scrollbar-arrow-color: black; scrollbar-face-color: gray; scrollbar-shadow-color: light gray; scrollbar-darkshadow-color: gray; scrollbar-track-color: #e2e2e2; scrollbar-highlight-color: white; scrollbar-3dlight-color: gray;"
    Take it out and use the select class inside the style tags, like: SELECT { background: #495C49; border: 1px solid; border-color : #000000;}
    shown here:
    Code:
    <style>
    BODY { 	scrollbar-arrow-color: black;
    	scrollbar-face-color: #5E715E;
    	scrollbar-shadow-color: #2E3A2E;
    	scrollbar-darkshadow-color: black;
    	scrollbar-track-color: #2E3A2E;
    	scrollbar-highlight-color: #5E715E;
    	scrollbar-3dlight-color: black;
    }
    
    SELECT {  background: #495C49; 
    	 border: 1px solid; 
    	 border-color : #000000;
    }
    </style>
    oh and by the way, you need a </body> tag.
    neil - Geocities, the trailer park of the web
    .<.<.<.<.<.<.<.<
    WEB[retype.net] + [guff.org]
    ICQ[273981] AIM[neiim]


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
  •