Notifications
Clear all

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

8 Posts
2 Users
3 Likes
932 Views
ZiT3K
Posts: 85
Topic starter
(@zit3k)
Estimable Member
Joined: 1 year ago

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: 3107
Admin
(@chris)
Support Team
Joined: 2 years ago

Hi @zit3k,

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

Reply
2 Replies
ZiT3K
(@zit3k)
Joined: 1 year ago

Estimable Member
Posts: 85

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

Reply
Chris
Admin
(@chris)
Joined: 2 years ago

Support Team
Posts: 3107

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

Reply
ZiT3K
Posts: 85
Topic starter
(@zit3k)
Estimable Member
Joined: 1 year 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; }

Reply
ZiT3K
Posts: 85
Topic starter
(@zit3k)
Estimable Member
Joined: 1 year 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!

Reply
2 Replies
Chris
Admin
(@chris)
Joined: 2 years ago

Support Team
Posts: 3107

@zit3k,

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

Reply
ZiT3K
(@zit3k)
Joined: 1 year ago

Estimable Member
Posts: 85

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

Reply