I've been trying to change the default blue hover color to something different in the Select2 elements in the website I'm designing, but no success so far. What's the correct, working css selector which would allow me to change the background color and font color of the hovered choice in the Select2 elements?
Thank you in advance!
Edit:
.select2-drop:hover {
background-color: #efefef;
}
I've tried .select2-container, choice but no success. The added code changes the whole dropdown color on hover, but I need it to only change the hovered option.
Try this
.select2-results .select2-highlighted {
background: #f00;
color: #fff;
}
You can use this to change the hover color, works for the Select2 V4.0.1
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #F0F1F2;
color: #393A3B;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: red;
color:white
}
Related
When I hover over a visited link the color changes correctly, but the background color doesn't. I noticed that this can be fixed by setting a background color for the a, but why is it like that?
a {
text-decoration: none;
color: inherit;
}
.link-1:visited,
.link-2:visited {
color: violet;
}
.link-2 {
background-color: yellow;
}
.link-1:visited:hover {
color: cyan;
background-color: orange;
}
.link-2:visited:hover {
color: cyan;
background-color: orange;
}
Link 1, without inital bg
<br/>
Link 2, with initial bg
There is a explanation for this situation :
You can only use :visited to change those properties if the link already has them in the “unvisited” or :link state. You can’t use it to add properties that aren’t already present on the link. For example:
You can change the background-color of a :visited link if the link element already had a background color.
You can’t add a background-color to a :visited link if it did not have a background color when it was an “unvisited” link.
https://css-tricks.com/almanac/selectors/v/visited/
I think it's a bug in CSS :) as it will have background if the a has a background in the normal case. So you need to set a background color for it with #fff if it's white or the color of the background.
How do I change the color of breadcrumb text and arrow in materialize css. I can do it by applying appropriate classes but I am unable to change the color of the arrow mark in the breadcrumb.
This Costom CSS changes the Arrow color.
.breadcrumb:before {
color: #00ff00;
}
This is for the Text
.breadcrumb, .breadcrumb:last-child {
color: #00ff00;
}
When changing the color of anything in Materialize, it is best to use !important after the color:
background-color: #ffffff !important;
This typically works.
I'm using AdminLTE 2.3.8. It overrides buttons background on it's box header buttons when hovered, but I want to keep original colors when hovered over any buttons. Eg.:
AdminLTE CSS:
.btn-default {
background-color: #f4f4f4;
}
.box.box-solid>.box-header .btn.btn-default {
background: transparent;
}
.btn-default:hover,
.btn-default:active,
.btn-default.hover {
background-color: #e7e7e7;
}
.box.box-solid>.box-header .btn:hover,
.box.box-solid>.box-header a:hover {
background: rgba(0,0,0,0.1);
}
I just want to get rid of these .box.box-solid>... rules without editing vendor's CSS. Is there any way to achieve this without copying every button style (there are different colors)? If there is, solution would be very welcome.
Use !important within your styles, so that any other vendor styles doesn't conflict with these buttons.
Example:
.btn.btn-default:hover {
background-color: blue !important;
}
Hope this helps!
I need to change the color of this button <md-button class="md-fab"> only when it is enabled
so I can do that
.md-fab{
background-color: orange !important;
}
but that make the button color 'orange' always,
I want to keep the color gray when the button is disabled
how can I do that
You can use the CSS selector for disabled elements, like this:
.md-fab:disabled {
background-color: gray !important;
}
Then your button will be gray if disabled, and orange if enabled.
Css give you attribute selector for the task.
.md-fab:disabled{
background-color: gray !important;
}
or
.md-fab[disabled]{
background-color: gray !important;
}
Here is Demo
use
.md-fab:disabled{
background-color: inherit !important;
}
in css
This is specifically with the selectBoxIt jQuery plug-in, using the jQueryUI theme.
I have this set up for the hover action:
/* Individual Option Hover Action */
.selectboxit-option .selectboxit-option-anchor:hover {
color: #ffffff;
background-color: #ff0000;
text-decoration: none;
}
That works fine. When I hover my mouse over the options, I get a red background with white text.
However, when I do this...
.selectboxit-option:focus .selectboxit-option-anchor:focus {
color: #ffffff;
background-color: #ff0000;
text-decoration: none;
}
...nothing changes.
I see that all the demos on selectBoxIt's main web page DO have changing background colors with keyboard focus...so what am I missing?
Technically, each option doesn't use the focus event, which is why the focus pseudo selector is not working for you. For the jQueryUI theme, the "active" option adds the ui-state-focus class, so to change the "focus" CSS style, you could have a rule like this:
.selectboxit-option.ui-state-focus {
background: #CCC;
}