How do I change the highlighting color of <select> that is the color that highlights <li> while cursor passes over it by using CSS?
No idea what you mean about "the color that highlights <li>", but it sounds like you want to change the background colour of <option> elements. I tried it and it doesn't work, you always get the system color.
If you wanted to highlight the entire <select> element on mouseover, this kinda works:
select:hover { background-color: red; }
However the behaviour is different in different browsers. For example, Chrome doesn't highlight the options in the drop down; Firefox does, but then it doesn't change them back if you move the mouse away and they are still pulled down.
As has been stated on many, many similar questions, you can't reliably style form controls. See here for more details.
You can't change the highlight color of the options through something like -> background:#f9f9f9
You can do something like this:
select > option:hover{
box-shadow: 0 0 10px 100px #FED20F inset;
transition: all .2s ease-in-out;
}
As mentioned above, setting background-color will work however :hover is buggy in IE7 - setting your doctype to strict will help.
You can use the :hover pseudo class
eg
.classOfElementToColor:hover {background-color:red; color:black}
Works with most browsers, but not on all elements in IE6
Simply use this CSS selector:
select option:hover {
background-color: yellow;
}
Related
I have a strange issue and I am not sure where to look for a fix. Googling is not leading to any answers.
I have some CSS to make the selected radio button purple. Easy right? However, it is blue. Even though the CSS is clearly in the inspector as purple. Even trying to force style in the browser just to change it doesn't work. Why would this be? I've never seen where it clearly is using the right CSS but not actually rendering. This is happening on multiple browsers.
My code is in Elementor:
selector input[type="radio"]:checked, input[type=reset], input[type="checkbox"]:checked, input[type="checkbox"]:hover:checked, input[type="checkbox"]:focus:checked, input[type=range]::-webkit-slider-thumb {
border-color: #9710A6 !important;
background-color: #9710A6 !important;
box-shadow: none;
}
Which shows up perfectly in the inspector:
.elementor-1202 .elementor-element.elementor-element-f11e2ef input[type="radio"]:checked, input[type=reset], input[type="checkbox"]:checked, input[type="checkbox"]:hover:checked, input[type="checkbox"]:focus:checked, input[type=range]::-webkit-slider-thumb {
border-color: #9710A6 !important;
background-color: #9710A6 !important;
box-shadow: none;
}
And shows as what is being computed in console.
background-color
rgb(151, 16, 166)
#9710A6 !important.elementor-1202 .elementor-element.elementor-element-f11e2ef input[type="radio"]:checked, input[type=reset], input[type="checkbox"]:checked, input[type="checkbox"]:hover:checked, input[type="checkbox"]:focus:checked, input[type=range]::-webkit-slider-thumb
And yet when I look at it is is blue. Using a color selecting tool it returns:
0075FF - I think it is the default browser blue.
Is there a way to have maybe some JS running or something changing it that would not show up in the console? If it was JS changing it wouldn't the result "computed" value change?
So strange, any ideas or help you can offer would be really appreciated. Thanks so much!
Thanks to Carlton Lindsay for the answer.
It appears you cannot change the radio button directly with CSS. Instead, hide the default button and create a new one using :before to add one back in it's place.
This seems like really strange way to do it. But it is how it is done for now. Hopefully things change soon in the browsers so you can directly manipulate the style through CSS.
I am having a problem, where there is a border(different in different browsers, blue in safari, a dotted black in chrome) around my buttons when they first load. I am guessing it's some sort of selecting but I want to disable it. How can I do so, that there is no border on the initial loading of the buttons. Here is what I mean:
It is called an outline. Try this:
button:focus {outline:0 !important;}
Worth noting that this will become an accessibility issue if removed.
This border is an outline. It's provided by browsers
You can also use:
button:focus {outline: none;}
Click here for more information.
If you want to remove it, use this.
.buttonclass {
outline:none;
}
<button class="buttonclass">Button</button>
If you want to keep it but you don't want that it should be visible, use this.
.buttonclass:focus {
outline:hidden;
}
<button class="buttonclass">Button</button>
However I don't think a button has an outline.
I don't want my html tags to change color and background when there is double click on it as you can see in this picture "Question" changes its color to white and background to blue when I doubeclicked on it. How I can solve this problem?
What you're referring to is a css ::selection attribute. The color isn't really changing, this is a native browser behavior to help users select and copy text. You can get rid of it but you must understand that you'll be breaking a very important usability pattern. People expect selection to work, even if it is stylized it should be there.
I would strongly advise you not to disable this behavior but customize it to fit your design if you really must.
p::selection {
color: red;
background: yellow;
}
div::selection {
color: green;
background: blue;
}
<p>Questions that may already have your answer</p>
<div>Another option of text highlight</div>
That's the default selection behavior for your browser. If you want to disable selection altogether you can use user-select: none; on your element.
Tried to find an answer, but I guess my search skills needs a makeover. Anyways:
I am doing some styling to a text field (input) when it's disabled. Basically I'm making the background dark gray and the font color white. This works perfectly (Safari needed a -webkit-text-fill-color property in addition to color: white;) - but opera is not listening to me!
No matter what I do, where I do it, and how I do it, the font color is still a pretty dark gray (which I assume is the standard color). If I remove the disabled-attribute, everything works perfectly.
excerpt of my CSS styling for the disabled style:
#customerNumberSearch[disabled="disabled"],
#customerNumberSearch:disabled {
color: white;
-webkit-text-fill-color: white;
}
So, how do you change the font color of a disabled input field in Opera?
Edit - alternative solution: This problem can be circumvented by changing out the disabled-attribute for readonly. This has some side effects, however, so make sure this works for you. A nice side effect is that this also fixes the problem in <= IE9
Try
input[disabled] { color: red;}
Can u try one of these:
[disabled] {
color:#fff;
}
OR
#customerNumberSearch[disabled] {
color:#fff !important;
}
I'm trying to remove the focus color from an option box when selected.
When you select a date from the select box it shows a blue background color in IE. I want to remove this. It goes away if you deselect by clicking the page. somewhere else other than the select box.
I've tried below css but it's not working in IE8.
select option:focus{
background-color: transparent;
}
As w3school says:
Note: For :focus to work in IE8, a DOCTYPE must be declared.
Any reproducible code in a fiddle please?
Do you test in a VM IE8 (great) or IE9/10 as IE8 (don't)?
Did you try with :active instead of :focus (but I think it's a problem with IE7-, not IE8)
What about:
option:focus {
background-color: inherit !important;
}