Notifications
Clear all

[Solved] Issue with Text Color Change on Input Field Focus

6 Posts
2 Users
0 Reactions
233 Views
Posts: 4
Topic starter
(@clunk)
Active Member
Joined: 2 months ago

Hello everyone.

I'm working on customizing the appearance of form input fields on the profile page. I'm aiming to change the background color to the input field while its focused. I've attempted to apply CSS to change the background color of the input fields to something else upon focus. However, the color doesn't change as intended when I focus on the input fields.

 

.wpf-field-wrap input:focus {

background-color: blue;

}

the focus color seems to be a cream color that i cannot find.


any guidance would be much appreciated 

5 Replies
Sofy
Posts: 4406
 Sofy
Admin
(@sofy)
Support Team
Joined: 6 years ago

Please try this one: 

#wpforo #wpforo-wrap .wpforo-profile input:focus {
    background-color: blue !important;
}

Don't forget to delete the caches before checking.

2 Replies
(@clunk)
Joined: 2 months ago

Active Member
Posts: 4

@sofy 

Thanks Sofy!

this worked great! mostly.

now just the dropdown menus and text areas are still that creamy beige.
any, more of a blanket statement

or will it be needing multiples to get them all to be the intended color

(@clunk)
Joined: 2 months ago

Active Member
Posts: 4

nevermind, got it all figured, thank you again!

Posts: 4
Topic starter
(@clunk)
Active Member
Joined: 2 months ago

one more question. this beige color in the input field seems pretty universal across the forum and seemingly some areas of your forum as well. is there a more universal setting somewhere that i could change, ive had to make 4 different !important, to just get them to change color and still have to get 1 or 2 more locations where this is happening

 

these below are what ive had to enact, how could i find the culprit causing the required !important

Thanks!

 

#wpforo #wpforo-wrap .wpforo-profile .wpf-field-wrap textarea:focus {
background-color: #FF1E00 !important;
}

#wpforo #wpforo-wrap .wpforo-profile .wpf-field-wrap select:focus {
background-color: #FF1E00 !important;
}

#wpforo #wpforo-wrap .wpforo-profile input:focus {
background-color: #FF1E00 !important;
}

input[name="thread[title]"]:focus {
background-color: #FF1E00 !important; 
}

1 Reply
Sofy
 Sofy
Admin
(@sofy)
Joined: 6 years ago

Support Team
Posts: 4406

@clunk,

You can comma-separate the selectors if the color is consistent across all cases, e.g.:

#wpforo #wpforo-wrap .wpforo-profile .wpf-field-wrap textarea:focus, #wpforo #wpforo-wrap .wpforo-profile .wpf-field-wrap select:focus,  #wpforo #wpforo-wrap .wpforo-profile input:focus,  input[name="thread[title]"]:focus{
background-color: #FF1E00 !important;
}