The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Active Inputs and Textboxes Colors

View previous topic View next topic Go down

Solved Active Inputs and Textboxes Colors

Post by Ace 1 on September 11th 2015, 8:16 pm

Before somehow my forum made it so when an input wasn't selected, the text color was white. Then when you selected it, the text was a light blue (#80A5C2). Any idea how to replicate this using CSS?

This was the same effect for large text areas as well. pls help.


Last edited by Ace 1 on September 15th 2015, 12:15 pm; edited 1 time in total

Ace 1
Forumember

Male Posts : 692
Reputation : 38
Language : my css ready java yo scripts boi
Location : Druid Hill Park smoking indo

http://genocideclan.forumotion.com

Back to top Go down

Solved Re: Active Inputs and Textboxes Colors

Post by Ange Tuteur on September 11th 2015, 8:53 pm

Hi @Ace 1,

To set a default color for text inputs use the following rule.
Code:
input, textarea {
  color:#FFF;
}

To set a different color while active use the :focus pseudo class.
Code:
input:focus, textarea:focus {
  color:#80A5C2;
}

Here's a list of the selectors, pseudo-classes, and pseudo-elements that you can use : http://www.w3schools.com/cssref/css_selectors.asp

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Active Inputs and Textboxes Colors

Post by Ace 1 on September 11th 2015, 10:02 pm

Actually xd I was messing around again and just tried :selected

And it worked lol. Can you tell me the difference between selected and focused?

Ace 1
Forumember

Male Posts : 692
Reputation : 38
Language : my css ready java yo scripts boi
Location : Druid Hill Park smoking indo

http://genocideclan.forumotion.com

Back to top Go down

Solved Re: Active Inputs and Textboxes Colors

Post by Ange Tuteur on September 12th 2015, 12:13 am

:selected doesn't exist unless you're talking about ::selection ? Shocked

The :focus state is applied when an element gains focus. For example, when you click and focus on a text field. ( your caret blinking in the field means it's focused )

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Active Inputs and Textboxes Colors

Post by Ace 1 on September 12th 2015, 4:02 pm

Code:
.inputbox { color: #FFF; }
.inputbox.selected { color: #80A5C2; }

Ace 1
Forumember

Male Posts : 692
Reputation : 38
Language : my css ready java yo scripts boi
Location : Druid Hill Park smoking indo

http://genocideclan.forumotion.com

Back to top Go down

Solved Re: Active Inputs and Textboxes Colors

Post by Ange Tuteur on September 12th 2015, 4:14 pm

That's just a normal class. The pseudo-class :focus applies the style regardless if that class exists or not, so long as the element is focused. The only way this "selected" class could work like focus was if you bound a focus and blur event handler to each input field which toggled the class.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Active Inputs and Textboxes Colors

Post by Ace 1 on September 12th 2015, 4:52 pm

Can you give me the selectors for the chatbox input and the top right search bar input?

Ace 1
Forumember

Male Posts : 692
Reputation : 38
Language : my css ready java yo scripts boi
Location : Druid Hill Park smoking indo

http://genocideclan.forumotion.com

Back to top Go down

Solved Re: Active Inputs and Textboxes Colors

Post by Ange Tuteur on September 12th 2015, 10:41 pm

You can use this for the search box input :
Code:
#search-box input#keywords {

}

and this for the chatbox input :
Code:
input#message {

}



Also if you're on Chrome ( or any other modern browser ) you can press F12 or right click + inspect element to open the developer tools. Go to the DOM inspector ( "elements" in Chrome ) then choose the magnifying glass to select elements from the page. It'll show you their classes, ids, tag name, styles, parents, etc, etc.. Razz



I recommend playing with it, it can make finding things so much easier. Plus you can preview CSS styles by modifying the default stylesheet in the sources tab or create workspace files and map them. Zen

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Active Inputs and Textboxes Colors

Post by Ace 1 on September 14th 2015, 3:18 pm

Thanks.

And btw, I do that all the time, but when I change it, it doesn't always work :'(

When I looked at the developer tools for the chatbox, I found this:

Code:
input.post {}

But it didn't work...

And neither did your code when I added :focused ...

Ace 1
Forumember

Male Posts : 692
Reputation : 38
Language : my css ready java yo scripts boi
Location : Druid Hill Park smoking indo

http://genocideclan.forumotion.com

Back to top Go down

Solved Re: Active Inputs and Textboxes Colors

Post by Ange Tuteur on September 14th 2015, 11:36 pm

You may need to add the !important flag to override the default properties. For example :
Code:
input#message:focus {
  border:1px solid #39C !important;
}

If a property doesn't apply the likely reasons are :

1. The selector is wrong
2. Another rule has higher influence, in which case you need to add !important at the end of the property value.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Active Inputs and Textboxes Colors

Post by Ace 1 on September 15th 2015, 12:15 pm

I was using :focused instead of :focus XD

Thanks. Solved.

Ace 1
Forumember

Male Posts : 692
Reputation : 38
Language : my css ready java yo scripts boi
Location : Druid Hill Park smoking indo

http://genocideclan.forumotion.com

Back to top Go down

Solved Re: Active Inputs and Textboxes Colors

Post by Ange Tuteur on September 15th 2015, 12:26 pm

You're welcome ^^

Topic archived

Have a good day. Smile

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum