GoFuckYourself.com - Adult Webmaster Forum - CSS Question: Form Element "States"

GoFuckYourself.com - Adult Webmaster Forum (https://gfy.com/index.php)

- Fucking Around & Business Discussion (https://gfy.com/forumdisplay.php?f=26)

- - CSS Question: Form Element "States" (https://gfy.com/showthread.php?t=898333)

Voodoo

04-07-2009 07:15 AM

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?

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 (Post 15715909)

: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 (Post 15715904)

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 (Post 15715938)

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 (Post 15715929)

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 (Post 15715969)

#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 (Post 15716002)

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 (Post 15716009)

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 (Post 15715965)

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 (Post 15716019)

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 (Post 15716023)

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 (Post 15716030)

What version of IE are you on?

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

Killswitch - BANNED FOR LIFE

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

All times are GMT -7. The time now is 12:04 AM.