CSS3 Pie has some odd functionality when styling select tags. The border radius and box shadow seem to apply the effect and then place the non-styled select box overtop of the effect. Is this an issue anyone has come across and worked around before?
I was actually having this issue, but figured out a fix.
Initially, with
behavior: url(stylesheets/PIE.htc);
the select would open at first, but if I applied a class of error on it with javascript during validation to make the border and background color change to red, it would no longer open properly. To get it to still work properly, you need to add 3 additional pie properties to the select. After adding
.ie select{
behavior: url(stylesheets/PIE.htc);
-pie-poll:false;
-pie-track-hover:false;
-pie-track-active:false;
}
I was able to get it to work and function 100% properly.
Do you mean to style it like this? http://jsfiddle.net/Tmzjz/1/
If you check this in IE7/8, the select box will not function properly.
When you need rounded corners and box shadows for select box, it is better to use a javascript method - http://cssglobe.com/custom-styling-of-the-select-elements/
Related
I'm working on a Gtk3 theme using css. I want to style a dialog so I used gtkinspector to check what widgets are inside there. Works well, the inspector recognizes the dialog. But it is apparently unable to identify a border sitting around the dialog. (See image below).
The border around the entire widget doesnt get hilighted by the inspector. .. so what does this consist of?
This is reflected in the css: if I put something like dialog * {green} in the css, everything colors green, except for the border. If I put .background {green} then the border also colors green....
I tried to find 'padding' 'margin' and 'border' entries that could be causing the border, but cant seem to find any....Any ideas?
Without code or a glade file one can't say for sure which properties are being used to add that border.
The border itself isn't a widget but a GtkContainer property. So you must look to the parent, GtkDialog, for the correct properties being used. Most probably its the empty border around the container child (see GtkContainer "border-width") but could be alignment or padding.
If your goal is to change the color of the background color then you should change it via GtkDialog.
Problem
I have a MenuItem that by default is initialized with drop shadow—which I’d rather not have. I’ve got a css file set up, but can’t seem to figure out what’s necessary to remove the drop shadow.
See how there's a rather ugly drop shadow down below that? I'd like the whole menu button to be flat, containing no borders nor shadows whatsoever.
The reason the background color of the various different elements in the image are red is due to my attempts in styling it differently—the background color does indeed work the way I’d expect it to.
What I’ve tried so far
.menu-item
{
-fx-effect: null;
-fx-drop-shadow: null;
}
Neither one of the properties seem to effect the outcome of my program.
I've also tried styling the menu, but that only appears to style the actual “Plugins” button.
Moreover
I can’t seem to think of any better solutions compared to those I’ve already tried. Perhaps someone can point me in the right direction?
Once again, I’m attempting to make the menu items look flat.
You need to add the effect to the context menu, e.g.
.menu-bar .context-menu {
-fx-effect: null;
}
BTW: There is no -fx-drop-shadow property.
IE 10 is giving me undesired UI for input elements that include a required attribute. For type=text, it’s a tooltip and for checkboxes, a red border.
I’ve figured out how to prevent such things in Chrome and Firefox (via pseudo-selectors). Are there selectors for these in IE, or other methods?
What looks like red border seems to be just an outline, which can be modified or removed using outline properties in CSS, e.g. set to one pixel wide using outline-width: 1px or removed using outline: none.
The tooltips might be something that you cannot style. Note that there are two kinds of tooltips for a required field on IE: one that you get on mouseover (a small simple box), and one that you get when trying to submit the form without a value for the required field (a larger box with a little arrow-like part, as in the screenshot).
I want to have a transparent background-color and I use gradient filter as a fallback of RGBA in IE. The code is like this:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#bfffffff,endColorstr=#bfffffff);
I also want to trigger an event when the user clicks the background, but it seems like the click event doesn't get triggered after I set the filter. Everything is ok without the filter.
So is it another IE bug? How can I solve the problem?
This is probably related to the IE bug that makes links with transparent background no longer clickable: I came across it today. I had a link with a transparent background and display set to block: the main area of the link wasn't clickable, but a 10px border I set on it was. It seems IE also has problems with filters.
This kind of bug is discussed here and here. The first guy's solution is to give a fake background image to the element before setting the filter. The second guy's is to give the element a background colour and set the opacity to 1%, which will make it practically invisible in IE. Hopefully you'll be able to get round it using one of these.
This is not the deal.
Internet explorer creates the filters on a separate layer which is placed above your element and since the new graphic layer is not part of the element - which you have the click event on - there will be no event bubbling.
Recently I made a label element with a nice gradient filter for IE. Only the text can be clicked. If I analyze the label layers from the side with and without the gradient layer, then you will understand the problem.
without gradient filter:
------------------
text layer
------------------
background layer
------------------
with gradient filter:
------------------
text layer
------------------
gradient layer
------------------
background layer
------------------
By the way, that is the reason, why you cannot put a border radius on a gradient filter too. Try it. Create an element, and style it with border radius and give it a gradient filter and run it in IE 9. No matter how you try to force the gradient to stay inside the round borders - with for example overflow:hidden -, it will never obey. Its like a separate element which is positioned absolute and right above your element to cover it up and right under the text.
This is a CSS-Question.
In this fiddle you can see a button.
It has got two span-elements inside. One with float:left; the other with float:right;.
The style is a normal button-style.
When clicking that button on the iPhone or hover it in a Browser the style gets lost.
This is because I changed the background-color.
Is there a way to change the background-color without losing the whole button-style?
EDIT:
Here are the two images: The first button is a normal button-element. The second button is a button where I changed the background-color ... this is what it looks like when I'm hovering over a button.
I think I understand what you mean. It looks like the rounded corner is gone when hovering, while a border is added. I'm afraid there's not a easy way to get what exactly you want, as the behavior & appearance of Button is controled by system.
Maybe you can try to replace it with a div, which you have full control of the style (chaning the style via JS when hovering).
All's working fine for me. However floating-right elements should always be placed before floating-left elements. Don't know if it will change anything.