CSS Question: Form Element "States" - GoFuckYourself.com

Voodoo · 04-07-2009, 07:15 AM

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 · 04-07-2009, 07:17 AM

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 · 04-07-2009, 07:17 AM

:focus

Just like javascript.

Voodoo · 04-07-2009, 07:18 AM

Quote:

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 · 04-07-2009, 07:24 AM

Browser incompatibility? Specificity? Show us your code.

fris · 04-07-2009, 07:26 AM

Quote:

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?

Code:

<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 · 04-07-2009, 07:36 AM

Quote:

Originally Posted by fris

Code:

<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 · 04-07-2009, 07:37 AM

Quote:

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 · 04-07-2009, 07:49 AM

Quote:

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?

Code:

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

Voodoo · 04-07-2009, 07:50 AM

Quote:

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?

Code:

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

Correct, the class is "text".

fris · 04-07-2009, 07:52 AM

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 · 04-07-2009, 07:53 AM

Quote:

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 · 04-07-2009, 07:55 AM

Quote:

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 · 04-07-2009, 07:57 AM

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 · 04-07-2009, 07:58 AM

Quote:

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 · 04-07-2009, 07:59 AM

Quote:

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 · 04-07-2009, 08:11 AM

Quote:

Originally Posted by Voodoo

What version of IE are you on?

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

04-07-2009, 08:30 AM

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 · 04-07-2009, 12:44 PM

this thread makes baby jesus weep in sorrow...

04-07-2009, 07:15 AM	#1
Voodoo ♥ ♦ ♣ ♠ Industry Role: Join Date: Sep 2002 Posts: 10,592	CSS Question: Form Element "States" 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? __________________ "I'm selflessly supporting the common good, but only coincidentally looking out for No.1."

04-07-2009, 07:17 AM	#2
Voodoo ♥ ♦ ♣ ♠ Industry Role: Join Date: Sep 2002 Posts: 10,592	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. __________________ "I'm selflessly supporting the common good, but only coincidentally looking out for No.1."

04-07-2009, 07:17 AM	#3
StuartD Sofa King Band Join Date: Jul 2002 Location: Outside the box Posts: 29,903	:focus Just like javascript. __________________ This is me on facebook This is me on twitter

04-07-2009, 07:52 AM	#11
fris Too lazy to set a custom title Industry Role: Join Date: Aug 2002 Posts: 55,372	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. __________________ Since 1999: 69 Adult Industry awards for Best Hosting Company and professional excellence. WP Stuff

04-07-2009, 07:57 AM	#14
Voodoo ♥ ♦ ♣ ♠ Industry Role: Join Date: Sep 2002 Posts: 10,592	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. __________________ "I'm selflessly supporting the common good, but only coincidentally looking out for No.1."

04-07-2009, 07:24 AM	#5
Sands Confirmed User Join Date: Feb 2007 Location: 418194907 Posts: 3,134	Browser incompatibility? Specificity? Show us your code.

04-07-2009, 08:30 AM	#18
Killswitch - BANNED FOR LIFE Guest Posts: n/a	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.

04-07-2009, 12:44 PM	#19
Deej I make pixels work Industry Role: Join Date: Jun 2005 Location: I live here... Posts: 24,386	this thread makes baby jesus weep in sorrow... __________________ Deej's Designs n' What Not Hit me up for Design, CSS & Photo Retouching Icq#30096880