Changing colour of text in a list form

[madspof]

How can i change the colour of the text in a list form like this one http://en.wikipedia.org/wiki/List_box does anyone know at all ???

 

thanks before hand madspof :-)

[jackpf]

Can you not just do something like

 

.listbox
{
color: red;
}

//And then

<select class="listbox"><option>blah</option></select>

 

 

Jack.

[dropfaith]

i dont think that works in firefox or safari if i recall

 

depending what this list box is for theres alot of ways

 

if they are in a form tho it cutss options way down cause of firefox support for the css of the select box

 

 

http://home.tiscali.nl/developerscorner/fdc-varia/styling-dropdown-boxes.htm

 

 

[DavidCT]

<style>

  input {

      font-size: 18px;

      font-weight: bold;

      color: #0000ff;

  }

  input.hover { how it looks when hovering over the area }

  input.focus { add styles here }

  select { add styles here }

  option { add styles here }

  input, select, option { make all types use the same properties }

</style>

 

You can use border, color, background-image, font-size, etc.

 

This works in Firefox, unsure about the others.

[DavidCT]

(can't modify my above msg...)

 

Forgot to mention, textarea is also available.

 

[haku]

<style>

  input.hover { how it looks when hovering over the area }

  input.focus { add styles here }

</style>

 

input.hover and input.focus are not CSS, and shouldn't go in style tags. On top of this, your style tag is incomplete and won't validate. It should read:

 

<style type="text/css">

[DavidCT]

What are input.hover and input.focus then?  It works for me, in Firefox.  says it's css here too, as well as numerous other sites.

 

I know the style tag was incomplete, I was lazy, sorry, I didn't realize it would annoy anyone

 

 

[haku]

It doesn't say either of those on the page you linked to. Probably because they don't exist.

[DavidCT]

It doesn't say either of those on the page you linked to. Probably because they don't exist.

 

Excuse me?

 

CSS

.input {
    border: 1px solid #006;
    background: #ffc;
}
.input:hover {
    border: 1px solid #f00;
    background: #ff6;
}
.button {
    border: none;
    background: url('/forms/up.png') no-repeat top left;
    padding: 2px 8px;
}
.button:hover {
    border: none;
    background: url('/forms/down.png') no-repeat top left;
    padding: 2px 8px;
}

 

It gives examples to input:hover THREE TIMES on that page and the sample form they show if you hover over the input boxes, in Firefox anyway, it changes from light yellow to dark yellow.

 

Why are you being so snotty to me?  Maybe it doesn't work in IE but it sure the heck does in Firefox.  input:focus isn't shown, maybe THAT doesn't exist - I don't know, but I mentioned it because it was mentioned in the article I read awhile back when I was learning about that stuff.  I don't use it in my form.

 

EDIT: Ok, I see what you were trying to say in the snotty way you were saying it.  It's input:hover (colon), sorry I typed period instead.  All you had to do is correct my typo.  I guess I should have cut/pasted it.

[haku]

If it was just the colon, it would be one thing. But there were a number of problems:

 

1) In the code you posted, it wasn't even input:hover, it was .input:hover. The leading period makes a difference, because that hover effect was put into place only for elements that had class of 'input' applied to them. The leading period targets only that class, where the code you gave targets everything.

 

2) input.hover and input.focus are both in javascript format, but were in CSS tags

 

3) As a result of point 2, it wasn't clear whether you were mistaking javascript for CSS (in which case the javascript would have also been wrong), or just getting the CSS wrong.

 

Because of these points, it wasn't as simple as pointing out a typing error, because I wasn't sure whether it was a typing mistake or a language mistake. Therefore I just pointed out that they don't exist.

[DavidCT]

Ok, sorry, they are both typos... I should have been more careful.

 

1) input.hover, typo by me

2) .input:hover, typo by the website I copy/pasted the example from

 

It's not javascript, it is CSS.  I'm sorry for the confusion and my bad postings.

 

It should be:

 

<style type="text/css">
input {
	font-size: 14px;
	font-weight: bold;
	color: #ffcccc;
	background-color: #ff0000;
}
input:hover {
	font-size: 14px;
	font-weight: bold;
	color: #ff0000;
	background-color: #ffcccc;
}
</style>

 

I hope I didn't screw that up too   The trouble with this forum is they take away the ability to edit posts after a few minutes, so I never could fix my errors once I knew they existed.

 

Thank you for bringing my errors to my attention

[haku]

No worries.

 

One last point though:

 

.input:hover, typo by the website I copy/pasted the example from

 

That wasn't actually a typo on the website, as they gave the input a class of "input". It's confusing though, and care should be taken to not make code confusing like that, so it wasn't well coded by that website.