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

 Sort Search Results by:

AI Assistant
Notifications
Clear all

[Solved] Button in CSS, if hover is good, why not active?

8 Posts
2 Users
3 Reactions
2,136 Views
ZiT3K
Posts: 92
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
(@zit3k)
Estimable Member
Joined: 4 years ago
[#30475]

Hi!

1.
At the "File upload" button in the account, if the hover also works, why isn't the active one?:

#wpforo #wpforo-wrap .wpforo-profile-account .wpf-field-type-avatar input[type="file"]::file-selector-button {
color: #643c14;
background: black;
border: 2px dashed #007800;
}
#wpforo #wpforo-wrap .wpforo-profile-account .wpf-field-type-avatar input[type="file"]::file-selector-button:hover {
color: #007800;
background: black;
border: 2px dashed #643c14;
}
#wpforo #wpforo-wrap .wpforo-profile-account .wpf-field-type-avatar input[type="file"]::file-selector-botton:active {
color: #007800;
background: black;
border: 2px dashed #007800!important;
}

2. Here, too, is an intractable problem (for me)....

For example: "Add answer" button. Here only the hover works perfectly...

#wpforo #wpforo-wrap input[type="submit"], #wpforo #wpforo-wrap input[type="reset"] {
color: #007800!important;
background: black!important;
border: 3px dashed #643c14!important;
font-weight: normal!important;
border-radius: 15px!important;
box-shadow: 0px 0px 20px 5px #a00000!important;
padding: 13px 10px!important;
font-size: 15px!important;
line-height: 0px!important;
}
#wpforo #wpforo-wrap input[type="submit"]:hover, #wpforo #wpforo-wrap input[type="reset"]:hover {
color: #007800!important;
background: black!important;
border: 3px dashed #643c14!important;
font-weight: normal!important;
border-radius: 15px!important;
box-shadow: 0px 0px 20px 5px #232396!important;
padding: 13px 10px!important;
font-size: 15px!important;
line-height: 0px!important;
}
#wpforo #wpforo-wrap input[type="submit"]:active, #wpforo #wpforo-wrap input[type="reset"]:active {
color: #007800!important;
background: black!important;
border: 3px dashed #643c14!important;
font-weight: normal!important;
border-radius: 15px!important;
box-shadow: 0px 0px 20px 5px #00780!important;
padding: 13px 10px!important;
font-size: 15px!important;
line-height: 0px!important;
}

Thank you in advance for your help!


Topic Tags
7 Replies
Chris
Posts: 3609
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
(@chris)
Famed Member
Joined: 5 years ago

Hi @zit3k,

Check this CSS Doc: https://www.w3schools.com/cssref/css_selectors.php


2 Replies
ZiT3K
(@zit3k)
Joined: 4 years ago

Estimable Member
Posts: 92
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

@chris

I managed to solve the smooth look, BUT the ACTIVE part does not want to work for the following.
Please check them out, thank you very much.

One is:
Account / "Add file button"

#wpforo #wpforo-wrap .wpforo-profile-account .wpf-field-type-avatar input[type="file"]::file-selector-button:active {
    color: #007800;
    background: black;
    border: 2px dashed #007800 !important;
}

Another:
Forum / "Add answer button"

#wpforo #wpforo-wrap.wpf-dark input[type="submit"]:active, 
#wpforo #wpforo-wrap.wpf-dark input[type="reset"]:active {
    color: #007800 !important;
    background: black !important;
    border: 3px dashed #643c14 !important;
    font-weight: normal!important;
    border-radius: 15px !important;
    box-shadow: 0px 0px 20px 5px #00780 !important;
    padding: 13px 10px !important;
    font-size: 15px !important;
    line-height: 0px !important;
}

Thank you very much.


Chris
(@chris)
Joined: 5 years ago

Famed Member
Posts: 3609
Chris
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

@zit3k,

Edited your post with correct Codes,

In the First one, you have made a mistake and wrote

"file-selector-botton", need to be "file-selector-button".

In the Second one you need to add .wpf-dark class next to #wpforo-wrap as you are using dark theme. 


ZiT3K
Posts: 92
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
(@zit3k)
Estimable Member
Joined: 4 years ago

@chris
I understand, thank you very much for that too!

For Chrome/Developer Tools:

For "Element status/disabling", yes, I can see that the code is changing.

However, for some reason it does not accept the "box-shadow" command, what can be the solution?

Posted by: @zit3k

#wpforo #wpforo-wrap.wpf-dark input[type="submit"]:active,
#wpforo #wpforo-wrap.wpf-dark input[type="reset"]:active {
color: #007800 !important;
background: black !important;
border: 3px dashed #643c14 !important;
font-weight: normal !important;
border-radius: 15px !important;
box-shadow: 0px 0px 20px 5px #00780 !important;
padding: 13px 10px !important;
font-size: 15px !important;
line-height: 0px !important; }


ZiT3K
Posts: 92
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
(@zit3k)
Estimable Member
Joined: 4 years ago

@chris

Hi, can you please help me with this button activity?

The active option does not want to work. 🙁

Thank you in advance for your help!


2 Replies
Chris
(@chris)
Joined: 5 years ago

Famed Member
Posts: 3609
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

@zit3k,

Please read about ":active" selector: https://www.w3schools.com/cssref/sel_active.php


ZiT3K
(@zit3k)
Joined: 4 years ago

Estimable Member
Posts: 92
ZiT3K
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

@chris 

I did it well, only 1 "0" was missing from the color code in the active line....

Thanks for the link, I understand these, hover and the rest, only because I didn't write the website here, so it's difficult to find how I can refer to a specific thing, since everything overwrites everything.

If all I had to do was look up the id or class code of one of them and write down that, for example, :hover and then the css code works, then it would be easy, I just have to find out from someone else's work how exactly I can refer to 1 specific thing, that's difficult so that I don't I am a web developer.

I will ask for 2 more buttons, then there are 1-2 small things next to each other (bold, selection, etc.) and everything is ready. 😐


Share: