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
Related
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.
I was recently fiddling with contenteditable in a webpage and got irritated when I needed to set a large number of span tags with it (I ended up using JavaScript to do it). If only I could set it via CSS...
Does anyone know the rationale behind why contenteditable was designed as an attribute rather than a style?
Most people would argue that contentEditable defines behaviour, rather than style (which is true).
WebKit has a CSS property that is similar to contentEditable: -webkit-user-modify.
try
span {
-webkit-user-modify: read-write;
-moz-user-modify: read-write;
user-modify: read-write;
}
it worked on Firefox, Chrome. You can find more info about user-modify
The ability for the user to edit some content or not isn't anything to do with presentation.
styles are optional; you can (in theory) render every page without CSS and it should still work fine. In fact, that's what many text-only browsers, or audio-only browsers do.
contentEditable changes the behavior of elements. A browser that doesn't use style, but interprets JavaScript, should still benefit from the property.
Is it possible to change the background color of disabled option in a selectbox in HTML ?
I have 2 disabled item to split the choice in my box and would like to put a color in those disabled option to separate them.
Thanks
have you tried input[disabled] as a css selector or input:disabled. Unfortunately I don't think there's a way to do this is IE without javascript.
Locrizak is right,
input[disabled]
it is called attribute selector, and you can easily style it in CSS.
If you want to be consistent with the results you can find here a good guide.
The problem comes if you use IE6, because attribute selectors are not supported (Reference)
If you want to be sure that the result is cross-browser compatible, just add a new class to your element.
<input type="button" class="disabled"/>
this will work in IE6 as well.
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
I have a problem with css selectors, I have 2 buttons rendered into HTML by a external javascript, and the buttons are at the bottom and at the top of my page.
So if I customize CSS with mutual class name one button looks fine but the other does not, so here is my idea:
select the first button of a xclassname and give it some CSS
do nothing to the other button leave its CSS as it is how can I do that
Here is how I failed to do it with CSS:
.xclassname:nth-child(1) {
⋮ declarations
}
Nothing happened, can anyone think of something that will work? btw, I use Prototype, not jQuery
That's a CSS3 selector. Are you using IE? Because that selector isn't goint to work there at all. It should work in Chrome, Safari, or a later version of Firefox.
The workaround that I would use would be to use JQuery to perform this operation instead. Use the nth-child() selector in JQuery to add a class which has the style declaration you want. It's a bummer that IE is so behind the times, but that's why it's the bane of the existence of every web developer around...
The accepted answer is wrong. The Prototype docs actually provide an nth child example and the OP actually mentions that he uses Prototype so he doesn't need to worry about IE.
This is the nth child example provided in the docs:
$$('table tbody > tr:nth-child(even)');
Given what you're trying to do though you could target the element like this:
$$('.xclassname').first().setStyle({
// some style here
});