Changing the scroll bars in forms

[c-pr0mpt]

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.

[Jeremy W.]

	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

[neil]

If you want to see which part each of those attributes controls on the scroll-bar, visit http://wsabstract.com/howto/scrollbarcolor.shtml.

[c-pr0mpt]

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!

[Jeremy W.]

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.

[c-pr0mpt]

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.

[Jeremy W.]

in page:

<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)

<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:

<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>

[c-pr0mpt]

Once again Jeremy, thank you very much. I appreciate this help.

Also, thanks for not being annoyed by my cluelessness in CSS.

[Aes]

Well, if you're wanting to put the styles inline, you would do something to the effect of:

<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:

<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.

[Jeremy W.]

CLUELESSNESS?! NO!!!!!! I take it all back! Learn for yourself!!!

[Aes]

Two posts were stuck in while I was typing that!!!

::sigh::

I can never win.

[Jeremy W.]

It's good that you realise this now before you get overly frustrated

[Aes]

Oh ho ho ho.

That was ccccoooolllldddd -- Ice cold.

You'll get your comeupance Jeremy, just you wait.

[Jeremy W.]

come... wha?

[c-pr0mpt]

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.

[Jeremy W.]

Well, remember the inline code? Use it for your drop down too

[c-pr0mpt]

I tried that. It didn't work. I must have done something wrong. lol Man I suck!

[Jeremy W.]

Hmm... Aes?!

[c-pr0mpt]

What did I do wrong here?

<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.

[Jeremy W.]

nothing that I can see... show me the html page so I can see the result?

[c-pr0mpt]

Same page as up above. I dont get it lol Im lost.

[Aes]

Hmmm ... why do you have two style=" " declarations? Change it to:

<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....

[c-pr0mpt]

I just fixed that Aes. Thanks

This is baffling me.

[Aes]

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....

[neil]

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:

<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.