I have some simple html/css with font awesome fonts to customise a checkbox. I am struggling to modify the colour (to red for now) when the checkbox is hovered.
As I am using a font awesome font to customise the checkbox, I assumed I needed to apply the css on hover of the label but its not having the desired effect.
input.faChkRnd:hover + label:before {
color: red;
}
This seems to change only on click of the checkbox and not when hovering.
any help appreciated!
fiddle here
You can't hover the input as it is display: none. Add your :hover to the label:
input.faChkRnd + label:hover:before {
color: red;
}
Updated fiddle
we cannot target hover state on an element which has display:none property. we can have a hover on label.
//when input is not checked
input.faChkRnd + label:hover:before {
color: red;
}
//when input is checked
input.faChkRnd:checked + label:hover:before {
color: green;
}
https://jsfiddle.net/a0s0gkxb/3/
This library might help to customise checkboxes and radio buttons , https://lokesh-coder.github.io/pretty-checkbox/
Related
I am trying to change the color of the Wordpress Download Manager (WPDownloadManager) plugin's link-template-button.
It doesn't seem to have it's own color style for the colored button, which is problematic, since it uses the primary link color of the rest of the site.
The primary link color of the site has a red-ish color, while my download button is blue.
I want the download-button text to be white (to achieve white on blue) instead of the current red on blue.
These are the css-classes used by the button: wpdm-download-link wpdm-download-locked btn btn-primary
I tried to add CSS additions as follows (none of which are working):
.wpdm-download-link.wpdm-download-locked.btn.btn-primary a:link {
color: #ffffff;
}
.wpdm-download-link a:link {
color: #ffffff;
}
a.wpdm-download-link:link {
color: #ffffff;
}
...and other combinations of of these classes.
I also tried for a:visited, a:hoover etc.
I found that the set primary link color you select on the Customize > Colours > Primary Link Color uses a #content attribute, so in order to change the color for all WPDownloadManager, you need to add Additional CSS like so:
#content a.wpdm-download-link {
color: #ffffff;
}
or if you want different colors/styles e.g for link and hover:
#content a.wpdm-download-link:link {
color: #ffffff;
}
#content a.wpdm-download-link:hover {
color: #aaffaa;
}
First time post, bit of a n00b...
Working on a WordPress site for a client. The following piece of CSS is used to style all hyperlinks within the post_content section of a page a dark blue color (#2a5db0).
section.post_content a {
color: #2a5db0;
}
a:hover {
color: #2a5db0;
text-decoration: underline;
}
However, buttons on the site are also styled to a dark blue color, making any button hyperlinks almost unreadable.
Essentially I want to exclude any hyperlinks enclosed within <button> tags from the above rule. What piece of CSS can I write to ensure that hyperlink text on buttons is displayed in white (#fff) but all other hyperlinks within the post_content section are styled #2a5db0 as per the above rule?
Thanks!
Though slow, this should work:
section.post_content *:not(button) > a {
color: #2a5db0;
}
But your last paragraph seems to suggest that you want this:
section.post_content a {
color: #2a5db0;
}
section.post_content button > a {
color: white;
}
You can target hyperlinks within a button tag like so:
This will target links within a button tag:
section.post_content button > a {
color: #fff;
}
Or
This will target the button text colour:
section.post_content button {
color: #fff;
}
What color will my input be when it is focused AND hovered?
input:hover {
color: red;
}
input:focus {
color: blue;
}
These are presumably in the same stylesheet and they have the same specificity (one pseudo-class and one element), so the only remaining step in the cascade order is order specified. That is to say that if it is hovered and focused, it will be blue.
On Specificity: http://www.w3.org/TR/CSS2/cascade.html#specificity
input:hover {
color: red;
}
input:focus {
color: blue;
}
In the demo, because the input is focused and the CSS has :focus listed last, the input will be blue.
If you reverse those two rule sets, the input will be red, because :hover is last.
Try input:focus:hover
Normaly we just have 3 states, active, hover and focus. What you want wont be possible, but try the code above.
CSS3 offers the new ::selection filter, which lets you change the color of highlighted text.
::selection {
color: #34495E;
}
However, sometimes the selection color contrasts badly with the default link color. I'd like to change the link color for highlighted text. I tried this:
::selection a {
color: #222;
}
However this had no effect on the link color (in Chrome at least)
Is it possible to change the link color of selected text?
Yes, it is possible to change the color of individual elements on selection. The correct syntax is, for example:
// Applied to the entire document
::selection,
::-moz-selection {
background-color: yellow;
color: red;
}
// Applied only to <a> elements
a::selection,
a::-moz-selection
background-color: green;
color: white;
}
Remember to include the vendor specific prefix in your CSS for Mozilla.
I want my links*** to change color when clicked, but also change color when hovered over.
I got a javascript function to change the color when clicked, but it requires inline CSS which is keeping my style sheet's hover from working.
Is there a way to have the inline CSS and CSS stylesheet not cancel out? Or is there another way to change the color of the link when clicked that wont cancel out the hover color?
*(These links are being used to show a hidden div using javascript)
script:
function toggle_link(select){
var color = select.style.color;
select.style.color = (color == "white" ? "yellow" : "white");
}
html:
<div id="gdtitle">
<a class="port" href="#" onclick="toggle('gdhide');toggle_link(this);" style="color:white">Graphic Design</a>
</div>
css style sheet
a.port{
text-decoration: none;
color: white;
}
a.port:hover{
text-decoration: none;
color: yellow;
}
You could use !important to override inline css
Better yet, don't but alter the behaviour of your toggle_link - would you rather add a class to the element and style it instead?
Use the :link, :visited, and :active pseudo-classes on the <a>.
CSS:
a.port, a.port:link, a.port:visited, a.port:active {
text-decoration: none;
color: white;
}