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]

Originally Posted by StuartD

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

Originally Posted by 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?

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

Originally Posted by fris

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

Originally Posted by Sands

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]

Originally Posted by Voodoo

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

Originally Posted by Sands

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]

Originally Posted by Voodoo

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]

Originally Posted by Voodoo

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]

Originally Posted by Sands

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]

Originally Posted by StuartD

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]

Originally Posted by Voodoo

What version of IE are you on?

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

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