i cant seem to make the :hover pseudo selector work on a Select element in IE 7, 8 and 9 even though the documentation that i have found says that IE7+ supports it.
According to this it should be full supported in IE7+:
http://msdn.microsoft.com/en-us/library/cc351024(v=vs.85).aspx#pseudoclasses
Quirksmode says "almost" http://www.quirksmode.org/css/contents.html
I have tried using a strict doc type but there is no difference.
Do anybody know a way to make the :hover selector work for the Select element in CSS?
I am just trying to change the border color on :hover, but setting the border doesn't even seem to be supported in IE7. It is supported in IE8+ but :hover is not it seems. Changing the color of the text doesn't even work.
Here is an example (works perfect in both Chrome and FF): http://jsfiddle.net/6VrfW/5/
You can wrap the <select> in a <div> and attach the hover to the div. It's awful, but so is IE.
Related
Background: I am trying to fix two annoyances in the appearance of the audio element in Chrome and while attempting to do so I came across two issues I would like to understand better. This is about Chrome 89 on MacOS. I nicely manage to style inside the audio element, using pseudo selectors. Finding out about the names of the pseudo selectors works nicely when looking inside of the shadow dom with the dom inspector. For example, the following two rules work exactly as expected:
::-webkit-media-controls-timeline {background-color:pink;}
audio::-webkit-media-controls-time-remaining-display {background-color:lightgrey;}
Question: However, two things do not work as expected and I want to understand why.
Problem 1: Styling the first letter in the remaining-display div does not work. The following rule is not effective.
audio::-webkit-media-controls-time-remaining-display:first-letter {color:white;}
This is astonishing, since the browser dispplays this
<style>div:first-letter {color:red;}</style> ... <div>e xample</div>
as expected. Why would I be unable to style the first letter? (The idea of this is to get rid of the most annoying leading / symbol in the remaining time display).
Problem 2:
Why would I be unable to style an element with a different pseudo attribute in a different part of the shadow DOM. More precisely the following rule is not effective:
::-internal-track-segment-highlight-before {background-color: blue;}
I see no difference to the other case above where the color styling worked. (The idea of this is to increase the too small contrast between two parts of the track segment.)
Add on: I managed to improved the contrast a bit using
audio::-webkit-media-controls-timeline {-webkit-filter: brightness(2.5);}
but the issue remains why the one method worked and the other did not work.
You are using Chrome, with "Show user agent shadow DOM" turned on
There are 2 types of shadowDOM
let's call it "userland" shadowDOM,
the (open or closed) shadowDOM created by a (3rd party developer) Custom Element/Web Component
This type is available since the W3C Web Components standard was implemented
"user-agent" shadowDOM created by each Browser (Vendor),
implementing input , audio , video, select etc. tags
but each Browser can have a different implementation.
This shadowDOM content can only be accessed if the Browser vendor has enabled access. (with shadowParts or related tech)
And in general it can not be accessed.
WebKit does have some pseudo selectors to change some settings
See: Is it possible to style html5 audio tag?
But they are not CSS selectors that get you full access to shadowDOM by creating complex selectors.
Some Font and Styling settings do cascade into shadowDOM only to have a consistent style in the whole page.
See: https://lamplightdev.com/blog/2019/03/26/why-is-my-web-component-inheriting-styles/
So that is why your color:red works, and :first-letter doesn't
That is why filter works; and background-color doesn't
alternative
https://github.com/dascritch/cpu-audio is a decent Web Component replacing the standard <audio> tag, that gets you styling in all browsers
Note the notation: (open) not (user-agent)
video::-webkit-media-controls-timeline {
background-color: blue !important;
}
work better for highter contrast.
(tested in video tag)
I just read this code somewhere.
*html #menu ul{margin: 0px 0px 0px 40px;width:960px;}
I know * means the selector means any element in css.
But is this needed here? Since it works totally the same without it.Or is it some kind of CSS hacks in specific browsers ?
It is a CSS hack targeted at Internet Explorer 6 and below. More modern browsers should ignore any of the styles applied using *html.
List of browsers which will apply the styles
IE4-6/Win
IE4-5/Mac
IE7+, when in backwards compatibility mode (aka quirks mode)
List of browsers which will ignore the styles
IE7+, when in Standards Compatibility mode
Firefox
NS6.0-7.2
NS4.x
Opera 5+ (I don't know about versions 1 through 4.)
Safari
Konqueror 3
iCab 3
Source: * html ("Star HTML") CSS Hack
So, provided your document is valid then IE7+ should display the page in standards mode and will ignore the styles. If the page is being displayed in 'quirks mode' then the styles will be applied in IE7+.
The Star Selector Hack
The star selector hack, also known as the star-HTML hack and the Tan hack, because it was first described in detail by Edwardson Tan, is the most widely used filter; it relies on a peculiar behavior in Internet Explorer 5.5 and 6. Even though it’s often labeled a hack, I’ve included it in this section on filters because, despite the fact that it exploits a browser bug, it uses a valid CSS selector. The selector, however, should never match any elements; all browsers, except Internet Explorer 5.5 and 6, understand this fact and ignore the rule.
The technique is simply to apply a descendant selector that makes use of the universal selector. The universal selector is, of course, valid CSS, so don’t be confused and start thinking that using the universal selector is bad news. The most common form of the technique (and the origin of its name) is to compose a rule with the * html selector. This constitutes valid CSS, but it shouldn’t match any elements. The selector should apply the rule to any html element that’s the descendant of any other element and, as html is the root element, it’s never a descendant of any other element.
However, while most other browsers ignore it, Internet Explorer 5.5 and 6 will interpret this selector as if there was no universal selector, like the rule below:
html {
⋮ declarations
}
Thus, the star selector hack is a safe way of applying CSS rules to Internet Explorer 5.5 and 6 without affecting other browsers.
You’d use it like this:
.test {
position: fixed;
}
* html .test{
position: absolute;
}
Only Internet Explorer 6 and earlier versions will apply the latter rule; other browsers will ignore it.
Source : http://reference.sitepoint.com/css/workaroundsfilters#workaroundsfilters__sect_starhtmlselector
Is there a trick to giving disabled (read-only) select elements a css style?
I tried
select[disabled] {color:#F00 !important}
(or variants using a class, !important etc) but that doesn't work in Chrome and IE. It does work in Firefox, but I'm looking for a universal solution.
Try input[disabled="disabled"]... it might be buggy http://reference.sitepoint.com/css/attributeselector
You could also just add a class to the disabled selector
I'm dissecting this very beautiful example of how CSS can help you create nice glow effects on images.
http://jsfiddle.net/necolas/KbNq7/
This particular line from the example mentions:
Although this method will only produce the full effect in Firefox 4,
other browsers will eventually catch up and apply transitions to
pseudo-elements.
What is a pseudo-element?
Pseudo-elements are CSS selectors that manipulate parts of an element in a special way.
They include:
:first-line
:before
:after
Application
Pseudo elements are applied like so
p:first-letter{
color:black;
font-style:italic;
}
Note: the : followed by the selector is how pseudo elements are denoted in CSS1 and CSS2. In CSS3, the double colon is used (::) to distinguish them from pseudo-classes.
More details here: http://reference.sitepoint.com/css/pseudoelements
Support
Support is decent for a number of browsers, with older versions of IE notably poor with support. QuirksMode has a compatibility table (a bit out-of-date but still useful): http://www.quirksmode.org/css/contents.html#t15
Cool Tricks
Pseudo elements can do some cool things, including
show the URLs of links in printed docs
fake a float:center;
See more here: http://css-tricks.com/9516-pseudo-element-roundup/
With jQuery
jQuery has a number of unique selectors that enhance and expand on the native CSS group:
http://api.jquery.com/category/selectors/
Note: you can use jQuery to force older browsers to adopt certain rules. For example, IE6 will ignore :last-child. Using jQuery can force IE6 to apply that style.
The Spec
http://www.w3.org/TR/CSS2/selector.html#pseudo-element-selectors
Its not an element in the dom. Its something you can select with a selector, notably after a :.
http://www.htmldog.com/guides/cssadvanced/pseudoelements/
If I use a class for a normal div, can I write the css like:
.messagebc:hover {
...
}
Is it legal?
It's ineffiecient to use :hover on non-link elements.
Avoid the :hover pseudo-selector for non-link elements for IE clients.
If you use :hover on non-anchor
elements, test the page in IE7 and IE8
to be sure your page is usable. If
you find that :hover is causing
performance issues, consider
conditionally using a JavaScript
onmouseover event handler for IE
clients.
:hover pseudo-selector to non-link elements is a very ineffiecient selector (e.g):
For example:
h3:hover {...}
.foo:hover {...}
#foo:hover {...}
div.faa :hover {...}
The :hover pseudo-selector on non-anchor elements is known to make IE7 and IE8 slow in some cases*. When a strict doctype is not used, IE7 and IE8 will ignore :hover on any element other than anchors. When a strict doctype is used, :hover on non-anchors may cause performance degradation.
More info on un-effiecient selectors
why havn't you simply tried it? yes, you can (in all modern browsers, the IE6 knows :hover only on a, if i remember right).
Yes you can use :hover for all elements in modern browsers (IE7+).
While IE6 support :hover only for <a> elements, you should write you html and css so, that you won't need to use js-patches (for example, in list-menus just use <li>Link</li>, not <a><li><a> and assign :hover to the link element. This should do the trick.)
Yes, however in IE6 you can set :hover only on ANCHOR elements.
Only ie6 does not support it on elements other than <a>, but that can be fixed with a simple javascript: ie7.js
The share of the ie6 is 5.55% and is
decreasing everyday
So You may use it
Wikipedia ie6
Every current browser will support it. If you need it to work in an older browser such as IE6 then take a look at #Willem's link.
If by the term class you mean HTML element then yes per W3C spec you can use the :hover selector on all elements. Whether you should or not is a different question.
Sources:
http://www.w3schools.com/cssref/sel_hover.asp
http://www.w3.org/2009/cheatsheet/#search,%3Ahover