I'm trying to create custom theme css for Primefaces 6.1, on the select one menu trigger I'm trying to change the bajcground color of the trigger when it's hovered and focused. Here's what I've tried
.ui-selectonemenu .ui-selectonemenu-trigger
{
background-color: blue;
}
.ui-selectonemenu .ui-selectonemenu-trigger:hover
{
background-color: orange;
}
Now this works for hover but obviously changes as soon as the cursor is no longer hovering over it. Now I'm aware of the .ui-state-hover, .ui-state-focused etc. However doing the following has no effect
.ui-selectonemenu .ui-selectonemenu-trigger
{
background-color: blue;
}
.ui-selectonemenu .ui-selectonemenu-trigger .ui-state-hover,
.ui-selectonemenu .ui-selectonemenu-trigger .ui-state-focused
{
background-color: orange;
}
Any ideas?
Ok found the approach, we need to specify the container, the state and then the specific component class so the correct way is
.ui-widget-container .ui-state-hover .ui-selectonemenutrigger,
.ui-widget-container .ui-state-focus .ui-selectonemenutrigger
{
background-color: orange;
}
Related
I want to change the color of Paginator Arrows(next and previous pages), as you can see the arrow are invisible
This is my CSS file, what should I add ?
body .ui-datatable .ui-paginator.ui-paginator-bottom {
background-color: #ccc;
}
body .ui-paginator .ui-paginator-pages .ui-paginator-page {
color: black;
}
I'm trying to create an application in Electron (version 1.6.2). Within the app I have a number of elements that I want to behave like buttons but display as simple Glyphicons. I use the following React code:
private static optionsFormatter () {
return (
<div className={`${styles.fieldGlyphiconContainer}`}>
<Button className={`${styles.glyphiconButton} btn-link`}><Glyphicon glyph='edit'/></Button>
<Button className={`${styles.glyphiconButton} btn-link`}><Glyphicon glyph='remove'/></Button>
</div>
);
}
In their default state, these elements render fine:
However, when I focus one of these elements an orange outline appears around it, which I don't want:
Looking through the CSS rules in the Electron debugger, it looks like the culprit is this from the Bootstrap CSS file:
.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
However, I'm not able to suppress these rules. Based on answers to similar questions such as this and this, I've tried adding the following rules to my CSS files:
.glyphicon-button {
// ...
:focus,
:active:focus,
.active:focus,
.focus,
:active.focus,
.active.focus {
outline: none !important;
}
}
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
outline: none !important;
}
I've also tried disabling the rules in the Electron debugger. However, none of this has worked:
Is there any way I can get rid of the orange outline on focus?
Edit
Based on #ovokuro's comment, I've changed my CSS to this:
.glyphicon-button {
padding: 0;
color: black;
:focus,
:active:focus,
.active:focus,
.focus,
:active.focus,
.active.focus {
outline: none !important;
}
}
button:focus,
button:active:focus,
button.active:focus,
button.focus,
button:active.focus,
button.active.focus {
outline: none !important;
}
This seems to work, although it globally modifies the button focus style. The next step is just to make this only apply to '.glyphicon-button'-class buttons.
Edit 2
Tried the following but this doesn't work:
button.glyphicon-button {
button:focus,
button:active:focus,
button.active:focus,
button.focus,
button:active.focus,
button.active.focus {
outline: none !important;
}
}
Target the HTML button element with class glyphicon-button when focussed like so:
button.glyphicon-button:focus,
button.glyphicon-button:active:focus,
button.glyphicon-button.active:focus,
button.glyphicon-button.focus,
button.glyphicon-button:active.focus,
button.glyphicon-button.active.focus {
outline: none !important;
}
Be aware that removing the outline property has consquences on accessibility.
If I have a blue div that someone else owns the code for
.stuff {
background-color: blue;
}
And I want it to be red on hover
.stuff:hover {
background-color: red;
}
But then I want to be able to add a class for it to go back to its non-pseudo-class state:
.stuff.otherclass:hover {
background-color: unset; /* Want blue in this case */
}
Is there a CSS option of going back to a pre-pseudo-class state?
Codepen demo:
http://codepen.io/anon/pen/EyEWww
The only way to roll back the cascade is using the revert keyword, but it rolls back to another origin.
There is no way to make the 2nd value in the output of the cascade become the cascaded value, ignoring the winner.
Instead, you can modify your selector and use the :not() pseudo class:
.stuff {
background-color: blue;
}
.stuff:not(.otherclass):hover {
background-color: red;
}
Or, alternatively, take advantage of .stuff.otherclass:hover having more specificity than .stuff:hover
.stuff, .stuff.otherclass:hover {
background-color: blue;
}
.stuff:hover {
background-color: red;
}
I've managed to change the Logo the way I want it using Logo using CSS but I'm struggling to figure out how to change the hover color of it.
I want to change the TEST color on hover from blue to something else
http://test.peterstavrou.com/
At the moment my CSS code is
header#top #logo {
letter-spacing: 2px;
font-size: 35px;
}
your Logo-Text is a link so you should use css-syntax for styling links:
a#logo:link { color: #fff; } /* a Link that has not been clicked yet */
a#logo:visited { color: #fff; } /* a link that has been clicked before */
a#logo:hover { color: #ff0; } /* a link on hover/rollover */
a#logo:active { color: #ff0; } /* a link that is just clicked */
Just do something like:
Solutions 1 Find the logo hover css and change the color property value to whatever color you want
color: red!important; /* change the property value to the color you want */
Solution 2 Create another hover CSS and force a change as shown below, if the above doesn't work
#logo:hover {
color: red!important;
}
Note: Make sure the code above is at the very bottom of your css file. that way, it will override the previous hover property defined, even if it has important
Add this below the code for header#top #logo { ... } that your sample is showing in the CSS.
header#top #logo:hover
{
color:red;
}
I have following html:
<div class="red placeholder"></div>
<div class="blue placeholder"></div>
<div class="green placeholder"></div>
and CSS:
.placeholder {
width: 100px;
height: 100px;
margin: 10px;
border: 1px solid black;
}
.placeholder:hover {
background-color: gray;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
I should not change initial placeholder declaration(s) and I don't want DIVs to change colour on hover.
Is there any way I can override placeholder class to "cancel" or turn off that hover property?
jsFiddle: http://jsfiddle.net/8QJEq/4/
That was really a good question, since am not able to work out any easier way than this, you can check out my solution
div[class="red placeholder"]:hover {
background-color: red;
}
div[class="blue placeholder"]:hover {
background-color: blue;
}
div[class="green placeholder"]:hover {
background-color: green;
}
Demo
Explanation: What we are doing here is, we are selecting the elements having a combination of 2 classes, and than we use the same color on hover, which is their default background-color, so inshort, this won't take out the hover, it does hover, but because of the same background color, you won't see any change.
I would recommend to avoid targeting the elements in the first place if at all possible.
If that's not possible, you could just declare the hover state with each color. As long as .color:hover is declared after .placeholder:hover it will override it since they share the same specificity.
jsfiddle 1
CSS
.color, .color:hover { background-color: color; }
Though I wouldn't recommend it, but it sounds like you don't want divs with color classes to not change background-color you could also just declare the rules as !important. But this would only be a last resort option since you wouldn't be able to easily override the background-color again.
jsfiddle 2
CSS
.color { background-color: color !important; }