I want to have all my svgs to have the same plain color. So I use
svg *{
fill: #ccc;
}
But I want to get default fills on :hover. How can I disable the fills and get defaults back?
You can do this using :not() and effectively style "not hovered".
svg *:not(:hover){
fill: #ccc;
}
The above might work, here's a quick CodePen that you can play with: http://codepen.io/anon/pen/rrqyAx
You can learn more on the Mozilla Dveloper Network entry for :not()
Alternatively (I was curious) you could use fill:inherit - which is just as valid. In this case, the color used will be inherited from the fill value of the parent svg, which can be set in css also.
svg *:hover{
fill : inherit;
}
I've added an svg styled in this manner to the CodePen.
Related
http://codepen.io/anon/pen/KwKOaz
Changing only the background-color significantly changes the style on a button element, specifically the border style.
This happens on chrome, safari, and firefox on a Mac. Why does this happen? How can I safely change its background color?
Browser vendors apply custom styling to UI elements like buttons and input fields. Altering one of these overwritten attributes results in disabling all of the other vendor styles on that element as well. If you want to change one attribute, you have to alter the others as well, I'm afraid.
Unfortunately I can't tell you why they do this - probably there is might be some spec behind, but I cannot find any evidence for that.
When all the styles are untouched, the browser uses the host OS's given API to render the given control. This will make the control look native to the platform, but if you apply any style to that control/element, the browser cannot guarantee that the given style can be applied in the given platform, so it defaults back to a simplified, fully css solution.
Also note, that styling control elements, though works, not covered by stable standards yet.
For example, the NSButton (native control behind the button in OS X) doesn't have an option to set the background color, so the browser faces an impossible task. On Windows, you can change the background color, this is why people report not seeing your issue on Windows.
Sometimes CSS styles are inherited. However, you are applying styles to your body which is everything in HTML. Personally I don't apply anything to body other than maybe reset or normalize CSS. That said, you can use CSS selector operators and\or id/classes to minimize:
http://www.w3schools.com/cssref/css_selectors.asp
Example:
html
btw don't write html like this just easier to read
<body>
<div class="wrapper">
<button class="all-btns red">
Cancel
</button>
<button class="all-btns green">
Save
</button>
</div>
</body>
css
.div.wrapper {
width: 100%;
height: auto;
background: #efefef;
}
.all-btns {
border: solid 1px #000;
width: 50px;
line-height: 48px;
height 35px;
color: #fff;
}
.btn.red {
color: #fff;
background: red;
}
.btn.green {
background: green;
}
I am working on a pure HTML/CSS layout. I have a dive with an ID, I have the following css code:
#headerTitleLeft:hover
{
background: lime;
}
This works with OPERA browser but not with IE9. IS there some directive to use or an alternative way?
Try using background-color instead of the shorthand background and/or the hexadecimal representation of lime.
I have the following:
<div contenteditable="true">Item 2</div>
In webkit I can easily style this with css. Firefox is ignoring the css, and making the contenteditable div white and resizable.
How can I modify the css for contentEditable in Firefox. I want the background to be transparent and to disable resizing, and the resizing handle bar.
Thanks
You can match the div with this code
div[contenteditable=true] {
background: rgba(0,0,0,0); /* transparent bg */
resize:none; /* disable resizing */
}
div[contenteditable="true"] {
/* your style here */
}
simone's answer was mostly correct except there needs to be quotes around "true" in [contenteditable="true"]
Turns out that if you use position:absolute FF auto adds resizers and a grab handler and sets the background to white. You can't override these seetings, well only resizers. Another -1 for FF.
div[contenteditable] {
background: white;
}
When overriding styles for a contentEditable panel, the css selector I found that firefox was adding a css-selectable "focus-ring" to my root contentEditable node
:-moz-focusring:not(input):not(button):not(select):not(textarea):not(iframe):not(frame):not(body):not(html) { outline: 1px dotted;}
Try variants of:
-moz-focusring or -moz-focusring[contentEditable='true']
You may want the aforementioned styles:
background: rgba(0,0,0,0);
resize:none;
But, you may need to firebug lookup the -moz specific resize parameter to disable.
For cross-browser stylesheet tests, just browse to this test data url:
data:text/html,<div style='position:absolute;left:100;top:50;width:200;height:300;background-color:rgb(50,50,80)'><div contenteditable>Test<br/>Test </div></div> <style contenteditable>head, title, style {display: block;} :-moz-focusring{background: transparent}</style>
A transparent background gif or png should do the trick
Is it possible to change an element's background RGBA's alpha without actually changing the color?
Or setting the color without overriding the alpha?
Prefferably cross-browser and without Javascript.
I can do it obviously by specifying the rgba color but I'd like to do classes for each %10 of transparency, and be able to set any color.
Thanks :)
In your CSS stylesheet:
.trans10 {
background-color: 33ccaa;
opacity:0.1;
filter:alpha(opacity=10); /* For IE8 and earlier */
}
.trans20 {
background-color: 33ccaa;
opacity:0.2;
filter:alpha(opacity=20); /* For IE8 and earlier */
}
And so on...
I have a small thumbnail image that I wish to change when the mouse rolls over it. I was wondering if there was a way to do this without swapping images on the rollover. For example, through CSS could I have the opacity change on rollover? If you have any other ideas about how to manipulate the image with CSS on rollover for making a change I am open.
Thanx!
You could put both images in one bigger image, use it as a background image and change only the position on roll-over.
With CSS3, there is an opacity option. This way you wouldn't be forced to reload an image when they hover above something.
#div {
background-image: url('blah.png');
}
#div:hover {
opacity: 0.5;
}
I'm not exactly sure if that's the right way to use it so you should use google for more examples. However, you should be careful because not all browsers might be supporting CSS3 yet.
Try using the :hover style on a tag. It may not be supported very well in early IE editions. But you can do something like:
img {
border: 1px solid black;
}
img:hover {
border: 1px solid white;
}