AI Search
Classic Search
 Search Phrase:
 Search Type:
Advanced search options
 Search in Forums:
 Search in date period:

 Sort Search Results by:

Filter by custom fields

Topic prefix

AI Assistant
Notifications
Clear all

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

6 Posts
2 Users
0 Reactions
2,894 Views
Posts: 4
Topic starter
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
(@clunk)
Active Member
Joined: 2 years ago
[#51290]

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: 5774
 Sofy
Admin
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
(@sofy)
Support Team
Joined: 8 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 years ago

Active Member
Posts: 4
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian

@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 years ago

Active Member
Posts: 4
Sofy
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian

nevermind, got it all figured, thank you again!


Posts: 4
Topic starter
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
(@clunk)
Active Member
Joined: 2 years 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: 8 years ago

Support Team
Posts: 5774
Translate
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian

@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;
}

Share: