The following lines are included in the HTML5 Boilerplate template by default:
::-moz-selection{background:#fe57a1;color:#fff;text-shadow:none;}
::selection{background:#fe57a1;color:#fff;text-shadow:none;}
However, I want to keep the selection color as the OS default (blue in Windows, I think it's brownish orange in Ubuntu). If I leave out the background property, there will be no background.
Since this selector is not officially supported for CSS, being removed from CSS3 and not currently in the draft for CSS4, there really isn't much documentation on how exactly the selector should be applied.
As defined by the selector, it is meant to override the system's default text selection colors. The browsers have apparently taken this literally. By specifying ::selection, those colors are immediately overwritten, even if you haven't specified them. The problem is the system's defaults are not part of CSS. The browser is seeing your declaration and thinking "ignore the system's default, use what's in this declaration instead." Since you don't have colors specified there, no colors are applied (background is none and color is inherit). Whoops, kind of hard to tell your text is selected, huh?
This is only a theory of what appears to be happening since, as I said, there really is no documentation on what actually happens, or what is supposed to happen.
Honestly, the only way you'd really know for sure is to look at the source code and see what it's doing when it sees that selector. Maybe asking someone on the development team for one of these browsers would be easier. Either way would still be difficult. Maybe you could submit a bug report and they can delve into the issue a little more...
Related
I'm trying to refine the Breeze Dark theme for konsole using custom CSS, but I cannot figure out the selector which gets picked when the konsole content changes and the tab get becomes highlighted (if you know what I mean; it merely means that the unselected tab text color gets changed when the content of the shell changes). Not hover though, as hovering works the over way.
Reading the official documentation doesn't clarify me (I suppose I'm using it wrong, but anyway). Does anyone know the name of the property/selector ?
Also, it would be nice if my custom CSS would be merged with teh default one, overriding only the things that I change, and leaving others intact. I expected this to be the default behavior, but seems like I'm wrong.
Here are some official examples for customizing QTabWidget.
Namely, you would need ::tab subcontrol and :selected pseudo state in your stylesheet. For example:
QTabBar::tab:selected {background: red;}
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'm trying to style an input[type="button"] and it seems that when I click on the label IE (9 in my case; I don't care for lower versions) doesn't apply the :active style. Everything works beautifully on Chrome and Firefox and also in IE if I click outside of the label. I had no luck in finding any clues to what might be the problem.
A <button> doesn't have this problem, so I guess there's something special about the other button's label, but what? And is there any workaround?
The problem is demonstrated at http://jsfiddle.net/Kmved/1/
Interesting find there. To answer the first question, "why?": unfortunately, the CSS spec leaves the semantics of :active entirely up to the browser vendor:
CSS does not define which elements may be in the above states, or how
the states are entered and left. Scripting may change whether elements
react to user events or not, and different devices and UAs may have
different ways of pointing to, or activating elements.
Now I would consider this a bug in IE (and expect it to be fixed in IE10 perhaps), but the letter of the law says that this is perfectly acceptable and tough luck to you.
To answer the second question (workaround?): well, you said it yourself. Use a <button> instead; as a bonus you get the option of placing any type of content inside the button in addition to simple text.
I have an PNG image file that is partially transparent. I need toggle its opacity .
Currently I am using the following CSS code to permit opacity:
filter:alpha(opacity=50);
However, IE has trouble handling the transparent portion of the PNG. When I try to fix it by adding the following CSS:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='../images/translucent_effect.png', sizing Method='scale');
Well, it doesn't work. My question is: what is the best solution that people have found to this problem? Should I just convert PNG into GIF? Or is there a more elegant solution?
Thanks.
IE's filter style is a horrible mess. It does allow the browser to do a few tricks that would otherwise be out of its scope, but it is non-standard, and has some major issues.
I can't be certain without seeing your complete CSS, but it looks to me as if you've been caught out by one of filters biggest 'gotcha' quirks:
If you need to specify more than one filter, you have to specify them together. If you specify them separately, as you've done in your example, the second filter overrides the first, even though they are in fact performing completely different actions. This is in fact consistent with the way CSS stylesheets work in general, but is counter-intuitive because of the scope of what filter is able to do.
You can specify multiple filters in a single filter style, separated by a space.
See here for a reference: http://msdn.microsoft.com/en-us/library/ms532847%28v=vs.85%29.aspx
The problems with this approach are obvious, if you want to have different effects triggered by different class names on your stylesheet -- because there's not way to combine filters from different sources into the same element.
The other big gotcha which might catch you out is the fact that filters written with the progid: syntax are actually invalid CSS due to the colon, and it's bad enough to cause some non-IE browsers to choke on the entire stylesheet. This can be prevented by using the shorthand syntax (as per the alpha() filter in your your first example), for IE6 and IE7, or for IE8 with the -ms-filter alternative, using the longer syntax, enclosing the whole thing in quotes.
Here's an example:
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50) progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/translucent_effect.png', sizing Method='scale');"
Hope that helps.
After fiddling around with an issue I am having I have come to this conclusion:
my list Elements are displaying smaller in Safari on my Macbook than they are on Safari on my PC. IE, and Firefox are displaying properly also.
What might be causing this difference? It is hindering my ability to complete this design.
www.christopherbier.com/gbg
Please let me know if there are any css tags that might be causing this.
Here is my previous question that includes my css etc. CSS spacing issues with Safari?
Any help is appreciated.
You might want to consider including css reset stylesheet. You can find a good one here:
YUI CSS Reset
This basically "removes and neutralizes the inconsistent default styling of HTML elements, creating a level playing field across A-grade browsers".
Hopefully that will solve your problem!
My guess is that it may well not be a css tag that's causing the issue, but just a difference in defaults on the two different browser versions. Each version is probably tailored to the OS to some extent, and may look different, which is expected.
Overriding this default behavior should raise a warning flag, because you're changing the overall look and feel, and it may not match well with the OS layout in general. It doesn't mean don't do it, but it does mean that you might want to proceed with caution.