CSS Question: Form Element "States"

[Voodoo]

Hey,

Can't seem to find the right state-term for when the cursor is actually IN a form input text field blinking and ready to type. I'm trying to style this w/ CSS and :active :hover :selected don't seem to work.

Any idears?

[Voodoo]

NOTE: Hover works... but only when you hover. LOL (Obviously, just didn't want you to think it isn't functioning.) It just doesn't work for what I'm trying to do.

[StuartD]

:focus

Just like javascript.

[Voodoo]

:focus

Just like javascript.

Should have noted that also. I tried :focus, but it doesn't seem to work either. Kinda weird.

[Sands]

Browser incompatibility? Specificity? Show us your code.

[fris]

Hey,

Can't seem to find the right state-term for when the cursor is actually IN a form input text field blinking and ready to type. I'm trying to style this w/ CSS and :active :hover :selected don't seem to work.

Any idears?

<form method="get" id="searchform" action="http://www.domain.com/">
<input type="text" value="search for something" name="s" id="searchinput" onfocus="if (this.value == 'search for a something') {this.value = '';}" onblur="if (this.value == '') {this.value = 'search for a something';}" />
<input type="submit" id="searchsubmit" value="" />
</form>

[Voodoo]

<form method="get" id="searchform" action="http://www.domain.com/">
<input type="text" value="search for something" name="s" id="searchinput" onfocus="if (this.value == 'search for a something') {this.value = '';}" onblur="if (this.value == '') {this.value = 'search for a something';}" />
<input type="submit" id="searchsubmit" value="" />
</form>

Yeah, this would work, I'm trying to do it in CSS though. Thought there might be a way.

[Voodoo]

Browser incompatibility? Specificity? Show us your code.

#main_body input.text {}
#main_body input.text:focus {}

also tried:
#main_body input.text:focus:selected
#main_body input.text:selected
#main_body input.text:hover (THIS WORKS)

[Sands]

#main_body input.text {}
#main_body input.text:focus {}

also tried:
#main_body input.text:focus:selected
#main_body input.text:selected
#main_body input.text:hover (THIS WORKS)

This might be a dumb question, but when you write input.text, you're assigning a class named "text" to the input, right? You're not adding that notation because the input type is text?

<input type="text" class="text" />

[Voodoo]

This might be a dumb question, but when you write input.text, you're assigning a class named "text" to the input, right? You're not adding that notation because the input type is text?

<input type="text" class="text" />

Correct, the class is "text".

[fris]

out of all the search forms that do this, ive never seen a pure css way, everyone does it via the form.

Would be interesting if it could be done.

[Sands]

Correct, the class is "text".

Changing the background color on focus with CSS works here in FF and IE. Maybe what you're trying to change during the focus state is the problem? Post your full CSS.

[StuartD]

Yeah, this would work, I'm trying to do it in CSS though. Thought there might be a way.

Are you actually trying to change the text in the form using css??? Because you can't.
You can change the border, colours, fonts and all that fun stuff, but the actual value would need to be set using javascript.

[Voodoo]

Yeah, looks like it's an IE issue. :focus works in FF. I found some javascript pseudo-classes that force it to work in IE though.

[Voodoo]

Changing the background color on focus with CSS works here in FF and IE. Maybe what you're trying to change during the focus state is the problem? Post your full CSS.

What version of IE are you on?

[Voodoo]

Are you actually trying to change the text in the form using css??? Because you can't.
You can change the border, colours, fonts and all that fun stuff, but the actual value would need to be set using javascript.

Trying to change the background :focus of text input on a page. Works in FF, just not IE (at least not the version I'm using 7.0.6).

[Sands]

What version of IE are you on?

IE8. Yeah, it doesn't work in IE6 or IE7.

[Killswitch - BANNED FOR LIFE]

Interesting stuff, I use Javascript to do mine, but while reading this thread, you could easily do it with css and a image with the text on it. heh.

[Deej]

this thread makes baby jesus weep in sorrow...