Can anybody help me. I would like to change the selected item color of select box from system generated dark blue color. Is it possible with css.I have tried different style properties such as background etc. But the color didn't changed.
It looks that you can customize the initial font, color, background, etc... but the pseudo classes hover or active don't appear to do anything...
You may be out of luck :(
The only other option that comes to mind is a roll-your-own drop down, wherein you could customize everything.
it looks that you can customize the initial font, color, background, etc... but the pseudo classes hover or active don't appear to do anything...
You may be out of luck :(
The only other option that comes to mind is a roll-your-own drop down, wherein you could customize everything
Related
I am aware there are other similar topics on this, but I was wondering how to make my situation work. I have not been able to make it work with available information so far.
I am trying to modify the background color of a Text button when the mouse hovers.
If I change my backgroundColor style inline of the button, it changes the appropriate area entirely. It seems there are no way to add an :hover functionality inline (I am using TS, shows up as an error. Even though it compiles, it has no effect).
If I use a SCSS module, I can change again the whole background color. But if I change the same property with the :hover functionality, it only affects the text part (see screenshot).
I've tried targeting more specifically the ant-btn-text, but to no effect still.
Would someone have an idea? I would like to avoid creating a state variable for this.
Edit: added portion of code and CSS as requested in comment
AntD classes generally override your own css stying. You can use !important to override that.
Ok so I found it (only post it now as it was getting late local time).
So compared to my original post, the & parent selector was necessary, and also adding !important made the trick.
So in my case, having:
.updateButton {
&:hover:{
background-color: red !important;
}
}
overrode the default styling.
Thank you!
I'm playing around with MaterialUI and I'm wondering how can I change the underline and text color of the Select component when an item is being selected? Currently, after I pick an option, the underline & label is blue while the background is gray. Is there a way I can customize the underline and label color?
I don't see an underline CSS API option in the documentation here so I'm a bit stumped as to where I can change these stylings.
Thanks for your help in advance!
The best way to achieve this is building your own theme using the theme provider as documented here
Themes Provider
You can also Override the style especially if you need to only change the behavior per component.
My advice is that you build your own theme(first one). you don't have to change everything too just the ones that you want to change the other styles will apply defaultly.
This is pretty hack-y but if you just want this done quick and dirty, you could add a rule in your CSS that uses fuzzy class selectors.
div[class="^=MuiInput-underline"]:hover:not(div[class="^=MuiInput-disabled"]):not(div[class="^=MuiInput-focused"]):not(div[class="^=MuiInput-error"]):before
So, I'm using a select bar in a site of mine. I'm trying to change the background color of the options when hovered over. Also, if anyone knows a good way to style the vertical slider, that'd be awesome.
Here's a fiddle of what I'm trying to do:
http://jsfiddle.net/zof9suLz/
<select class="scrollbar" name="mydropdown" onchange="document.location = this.value">
<option value="#">Search by State</option>
<option class="scrollbar-option" value="http://alabamaadoptivefamilies.com/">Alabama</option><br />
The odd thing is that when you go down the list using a scrollwheel, and land on an option, the correct color comes up until you move your mouse again.
I just need to change the background color when you hover over the options, but I can't get it to do what I want, haha.
My site url is: statesites.wpengine.com
What you describe seems to me like perfectly valid behaviour, all the time I saw select in any webpage it behaved like that, i.e. background color on option being hovered over after scrolling only changes after moving the mouse. Just to verify I tried the demo on w3 pages (try it yourself) and added more options for scrollbar to appear - it results in the same behaviour, it is for sure not caused by conflicting styles.
As for customizing the scrollbar style, that appears to be a duplicate of this SO question, quoting the most upvoted answer:
Scrollbar CSS styles are an oddity invented by Microsoft developers.
They are not part of the W3C standard for CSS and therefore most
browsers just ignore them.
In the current version of Chrome 36.0.1... there's an annoying bug where the dropdown arrow is always black, making it useless if it's in a container with a quite dark background.
The select element's color attribute isn't applied either (though it works on the text of the closed element itself), nor is the inherited color. My searches always came up either useless or with tutorials to replace the whole thing, but that would be overkill.
Since there's a ton of legacy selectors still present to style elements like the scrollbar, is there also one to just define the color of the arrow without having to replace everything but the damn kitchen sink?
Thanks in advance for your replies.
Unfortunately, there is no simple way to change the default select menus without completely overriding them. The individual browsers all render forms differently, and this is a known pain-in-the-ass.
I can't seem to target the blue hover background of the checkboxes in Twitter Bootstrap. My project is in local dev but just look at any of the checkboxes on this page http://twitter.github.io/bootstrap/base-css.html#forms - When I use Firebug to set them to hover they dont operate like normal hovers. I have tried Chrome dev tools also. I have also just tried styling them using
input[type="checkbox"] {
}
to target. I've tried affecting background-color and box-shadow (inset) and nothing seems to get rid of the blue.
Has anyone any experience of this?
I am not asking how to style checkboxes and if that answer contains and answer for me apologies and please point it out. What I am asking is specific to Bootstrap. I am asking which attribute ( in bootsrap) the blue hue comes from.
There is no Twitter Bootstrap attribute for this. It's just browser depended. Here, look at this simple checkbox. It have the same blue color on hover as it in Bootstrap.
<input type="checkbox"/>
http://jsfiddle.net/gjVm7/