Ok, not sure if this is even possible, but I want to change the default color of a selected HTML listbox item. I'm not talking about the background color of the listbox option tag. That can be done through CSS, I get that. I'm talking about the color that overrides that background color when the item is selected. In Chrome, FF, and IE if I just change the background color to red and then select the item from the list, the color is now blue. I can't seem to find anything on whether or not overriding the color is possible, but I was hoping someone here might know. Thanks for any help.
Not reliably. The <select> element's rendering is controlled by the operating system, so it's not something that's simple to style. Most services that attempt this use JS/HTML/CSS to create pseudo- elements that can be styled at will rather than true <select>s.
Generally speaking, I wouldn't recommend styling this element for UX reasons anyway. Users need to see UI elements acting and looking in similar ways to grok their purpose and behaviour. Overriding default behaviour can erode that.
When I style select boxes I use jQuery chosen and edit the CSS
http://harvesthq.github.com/chosen/
Related
I'm looking at a webpage I didn't create, and trying to find what background color it uses "under" an element. Unfortunately, that element isn't the one setting the background color I'm looking at. How can I figure out the background color of that element? Do I just have to click on every parent until i find the one with the background color? I'm hoping there's an easier way of doing this with Firefox inspection tools.
Background color is just an example. I know I could just use a color picker tool for this, but the same question could apply to "who's setting this font size" and "who's setting this box-sizing?" I want to learn how to inspect properties better, not how to find background color better.
The background image or background color are actually a special case because they are not inherited. That means, you do have to check the other elements that are behind the element you are inspecting to find the one that sets the background. Often those are the ancestor elements though that is not always the case. The element you are inspecting could be positioned or have a display value of fixed or something similar. And also, the background color can be transparent, so a color picker doesn't necessarily return the set color(s).
So, to get the elements actually behind the current one you will need to run the document.elementsFromPoint() function for a specific coordinate lying within the element. Then you can traverse through them to find out which one is setting the color.
A simple JavaScript snippet to help with this is
document.getElementsFromPoint(x, y).forEach(el => {
const cs = window.getComputedStyle(el);
bgcolor = cs.getPropertyValue('background-color');
console.log(el, bgcolor);
});
which outputs the background color values of each element up to the root <html> element. Just execute it in the command line of the Console panel.
For all other properties you should have a look at the Rules panel. In there you can search for the property you want to know about, like the mentioned font-size. Put it in backticks to search for exact name matches.
You may also want to enable the display of browser styles in order to see whether the value comes from the browser stylesheet itself.
Furthermore, you can click the little target icon besides each selector in the panel to highlight the elements matched by the selector within the page.
Is there any way I can change the color of the datalist (black box appearing in the image)
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist
EDIT: you might be seeing it as white, it takes the default color of system
Datalist has very few to no possibilities when it comes to design. There may be vendor specific styling, but I would not advice using them in production environments.
The best workaround is to repaint the whole datalist with JavaScript like awsomplete does it. -> https://leaverou.github.io/awesomplete/
You cannot style these elements like select and datalist it has very little flexibility in styling.
Browsers define their own styles to the elements I mentioned above.
Try to read this guide
I am creating a set of divs which the user can navigate through with tab, and I wanted to add the standard orange focus outline to the elements.
Does anyone know what I need to do to add it in? I know that it works off the outline property, but I'm not sure what color to set it as, or whether I'd be better off using a box shadow with a bit of blur to get the same effect.
Also, in case it's relevant, I'm using dojo and avoiding jquery - but hopefully this is a pure css solution :)
I would suggest this working jsFiddle, note that in order to accomplish this you will have to use <div tabindex="0"></div>.
Every browser renders the focus differently. In order to unify the entire experience on your website, I would suggest removing the browser outline with CSS and adding your own style.
As far as I know, only Chrome renders the orange outline, I've tried to match the color as best as I could, but you can always experiment on your own.
You can use the css :focus Pseudo selector
:focus {
declaration block
}
Although the div attribute does not accept input, so it cannot have :focus normally. So you would have to set the div's to have a tabindex attribute
I had to change the button color of an html select (combobox), but since it is not posible to add an image directly to the button of a select, what I did was setting an image behind the combobox, and then making the combobox transparent "filter:alpha(opacity=0);" in iexplore and "opacity:0;" in firefox.
This way, you do not see the select, instead, you see the image (what is like a select, but with other color, and since the select is on top of the image (greater z-index) when you click, you are clicking the select. And when it shows the options, yes, you can see them.
The problem is that I need it to work in Firefox, Chrome AND IEXPLORE.
There is no problem with Firefox and Chrome, but the text of the options in Iexplore, appears without the antialias it gets in the other browsers. All the text of the page is antialiased, so I need this to be also antialiased.
I have seen how to make it, but it works if the text is inside a div, a H1 but not if it is in the options of a select.
For example:
http://www.useragentman.com/blog/2010/09/02/how-to-make-cleartype-font-face-fonts-and-css-visual-filters-play-nicely-together/
But it does not work in a select :(
Thanks in advance!!
I seem to remember IE doesn't let you color the background on an <option> only on the entire <select>. The hack you describe requires a background color and chroma so maybe try setting them on the select element.
Alternatively there are javascript solutions that implement select using non-native elements. By avoiding the rendering of a native select you avoid triggering bugs that are unique to IE's implementation of form elements (which uses native system objects). There are too many implementations to list so just search for 'custom javascript dropdown'.
So I've got a standard dropdown menu in my HTML. I've also got the background colored, and I have a background image that I want to use as a button.
But there's a problem, because I can't get the default button to disappear in Firefox. Even though I can get the button to disappear in Webkit using -webkit-appearance:none; I can't get it to go away in Firefox.
Here's an example: http://jsfiddle.net/wG7UB/
And I'd prefer not to revert to a heavily styled unordered list if at all possible. Thanks!
What do you exactly want to do?I'm not sure i understand fully what exactly you're trying to do
if you want to make it disappear then you can use "{display: none}"
or you can use "-moz-appearance" property if there is any.
Here I go answering my own question... I just wrapped my select tag with a div, and used a pseudo element to cover up the button. Slightly hackish, and I don't like using the pointless div, but I guess it works okay. Then I set the CSS of the pseudo element to pointer-events:none; so that it would allow clicks through the image.
Example: http://jsfiddle.net/howlermiller/nchUt/1/