My code for changing background of checkbox:
.question11 input[type=checkbox] + label {
display: block;
height: 16px;
padding-left: 25px;
background: url(images/bg.gif) top left no-repeat;
}
The problem is it's not working with Internet Explorer 9.0.4.
The CSS selector is too complex for IE. The easy solution is to give a class or id to the checkbox and the label if you can change the HTML.
<input type="checkbox" class="foo"><label class="foo">...</label>
.question11 .foo {
...
}
Juhana is right.
The other problem is, you can't style checkboxes 100% individual via CSS only.
There are great plugins for it, so you can completely replace the checkboxes etc. via images.
--> Uniform - sexy forms with jQuery for example.
The rule does not set any properties on any checkbox. It only applies to label elements in a specific context, and that’s how it works, on IE 9 and other browsers.
If you would like a rule to apply to any checkbox element that is immediately followed by a label element (as I guess), then you would need a different kind of selector—something that does not seem to exist in the CSS Selectors Level 4 draft, still less as supported. So you would need to add some markup, like class attributes for checkboxes.
Try like this
.chh {
background-image: url(images/checkbox_bg.gif);}
if(document.getElementById(id+ii).checked==true){
document.getElementById(id+ii).className==chh;
}
First write css then apply javascript function
Related
I've been looking for a way to easily style checkboxes even in those cases where I don't have labels but I haven't found any answer that completely satisfied me so I decided to try and find a way by myself so that all the others might find it useful.
This is what I ended up with.
CSS Checkbox without label
What I do is basically style the after elements and set pointer-events to none so you'll be able to click true the after element.
This allows us to let the checkbox handle the click and change its state from checked to unchecked and we'll then style the after element depending on the checkbox state.
This will be the unchecked style
.check:after{
pointer-events: none;
background: white;
content: ...
....
}
And then we'll have our checked style
.check:checked:after{
background: green; /* Change background and maybe image */
....
}
Please notice that the original checkbox will be still visible under the after element since we can't hide it (hiding it will end up hiding after and before elements too) so you can't play with transparency on your after element but you can still play with background image position and background color as I did in the example.
I hope this will help you with your styles! :)
Background
So I found this line of code in our Ext JS's css which removes focus for every element in webkit. Unfortunately it has been almost 2 years and they still haven't addressed their TODO.
// TODO: remove outline from individual components that need it instead of resetting globally
.#{$prefix}webkit {
* {
&:focus {
outline:none !important;
}
}
}
which compiles to
.x-webkit *:focus {
outline: none !important;
}
What this does is take away the browsers default focus (UA styles) on links so when the user tabs to an anchor tag they have no UI indication that they are on the tag. I want to use native browser behavior so I don't want to override the a:focus in particular and using initial doesn't work. Also removing the entire style causes UI components to handle their focus UI differently which is not acceptable.
tldr
What is the best approach for applying a style to all tags except a certain tag(s). I know I can make a selector that has all of the tags except the tag I don't want but that is tedious, is that really the best approach ? If so is there a list of valid UI tags for HTML ?
You could use the CSS :not selector, and apply a style to all descendants of .x-webkit except the tag(s) you want to exclude:
.x-webkit *:not(p):not(em) {
color: red;
}
<div class="x-webkit">
<div>red</div>
<ul><li>red</li></ul>
<p>
Not red<br>
<strong>red</strong><br>
<em>Not red</em>
</p>
<table><tr><td>red</td></tr></table>
</div>
I have been trying to get Custom checkboxes to work with my site. However, I've run into a puzzling issue with a specific part of my HTML.
Here is my current code:
HTML
<div class="quicklinks_login">
<label for="cookieuser" style="padding-left: 7px;"><input type='checkbox' name='cookieuser' value='1' tabindex='10' id='cb_cookieuser_navbar' accesskey='c' /> Remember Me</label>
</div>
CSS
input[type="checkbox"] + label,
label > input[type="checkbox"] {
background: url("../images/override/state_off.png") no-repeat scroll 0 0 transparent;
cursor: pointer;
}
Now, as you can see from my CSS, I have two patterns that I want to be styled. The label > input[type="checkbox"] 'pattern' should be applied to my HTML (which it is, according to FireBug). However, the custom image does not display with the checkbox.
To sum it up, my question is simple: Why is the 'pattern' label > input[type="checkbox"] not working for my HTML?
You can customize checkboxes and radio buttons with just CSS if you prefer. https://www.google.com/search?q=css%20only%20custom%20checkbox . The basic idea is to style the label and hide the actual checkbox. Clicking on the label sets/unsets the checkbox, so all the form functionality is retained. The only downside is that old versions of IE require a graceful fallback, which most of the solutions provide.
This is one of those elements what browsers tend not to let you style
that much, and mostly people replace it with javascript.
answere on SO by #levente-nagy
I have an image and when the image is clicked I want to reveal another image below it. I am looking for a simple CSS only solution.
Is that possible?
TL;DR!
input[type="checkbox"] {
content: url('http://placekitten.com/150/160');
appearance: none;
display: block;
width: 150px;
height: 150px;
}
input[type="checkbox"]:checked {
content: url('http://placekitten.com/170/180');
}
<input type="checkbox" />
A Pure CSS Solution
Abstract
A checkbox input is a native element served to implement toggle functionality, we can use that to our benefit.
Utilize the :checked pseudo class - attach it to a pseudo element of a checkbox (since you can't really affect the background of the input itself), and change its background accordingly.
Implementation
input[type="checkbox"]:before {
content: url('images/icon.png');
display: block;
width: 100px;
height: 100px;
}
input[type="checkbox"]:checked:before {
content: url('images/another-icon.png');
}
Demo
Here's a full working demo on jsFiddle to illustrate the approach.
Refactoring
This is a bit cumbersome, and we could make some changes to clean up unnecessary stuff; as we're not really applying a background image, but instead setting the element's content, we can omit the pseudo elements and set it directly on the checkbox.
Admittedly, they serve no real purpose here but to mask the native rendering of the checkbox. We could simply remove them, but that would result in a FOUC in best cases, or if we fail to fetch the image, it will simply show a huge checkbox.
Enters the appearance property:
The (-moz-)appearance CSS property is used ... to display an element
using a platform-native styling based on the operating system's theme.
we can override the platform-native styling by assigning appearance: none and bypass that glitch altogether (we would have to account for vendor prefixes, naturally, and the prefix-free form is not supported anywhere, at the moment). The selectors are then simplified, and the code is more robust.
Implementation
input[type="checkbox"] {
content: url('images/black.cat');
display: block;
width: 200px;
height: 200px;
-webkit-appearance: none;
}
input[type="checkbox"]:checked {
content: url('images/white.cat');
}
Demo
Again, a live demo of the refactored version is on jsFiddle.
References
:checked
-moz-appearance/-webkit-appearance
Note: this only works on webkit for now, I'm trying to have it fixed for gecko engines also. Will post the updated version once I do.
Update: the appearance property is now widely adopted, so the use of vendor prefixes is redundant. Horay!
You could use an <a> tag with different styles:
a:link { }
a:visited { }
a:hover { }
a:active { }
I'd recommend using that in conjunction with CSS sprites: https://css-tricks.com/css-sprites/
some people have suggested the "visited", but the visited links remain in the browsers cache, so the next time your user visits the page, the link will have the second image.. i dont know it that's the desired effect you want. Anyway you coul mix JS and CSS:
<style>
.off{
color:red;
}
.on{
color:green;
}
</style>
Foo
using the onclick event, you can change (or toggle maybe?) the class name of the element. In this example i change the text color but you could also change the background image.
Good Luck
This introduces a new paradigm to HTML/CSS, but using an <input readonly="true"> would allow you to append an input:focus selector to then alter the background-image
This of course would require applying specific CSS to the input itself to override browser defaults but it does go to show that click actions can indeed be triggered without the use of Javascript.
Try this (but once clicked, it is not reversible):
HTML:
<a id="test"><img src="normal-image.png"/></a>
CSS:
a#test {
border: 0;
}
a#test:visited img, a#test:active img {
background-image: url(clicked-image.png);
}
You can use the different states of the link for different images example
You can also use the same image (css sprite) which combines all the different states and then just play with the padding and position to show only the one you want to display.
Another option would be using javascript to replace the image, that would give you more flexibility
No, you will need scripting to place a click Event handler on the Element that does what you want.
https://developer.mozilla.org/en/DOM/Event
https://developer.mozilla.org/En/Listening_to_events
Note, this is different than the older question How can I apply CSS on all buttons which are present in that page? because this is an already existing style. So given that a style, which we'll call "standard_label_style" already exists in an included CSS file, what can I do to say that all the labels on this page should have that style short of adding:
class="standard_label_style"
to each and every one? And yes, I know I could apply the styles ex-post-facto with a snippet of jQuery or JavaScript code. I'm just trying to learn how I'm supposed to do it with CSS.
Follow Up
I've gotten several comments that say just use syntax like this .standard_label_style, label... Unfortunately that does nothing like what I want. That would allow me to apply additional rules to the standard_label_style class, as well as rules to labels within this page, but would not allow me to apply that style to all the labels on this page. To see an example of this, here is a stylesheet and html to demonstrate. The label without a class will still not appear in red but that's what I'm hoping to have happen. I want to apply an existing class to all those labels on the page, not just the one with the class and without adding new styling on this page, the existing style should be the only style.
included.css:
.standard_label_style { color: red; }
test.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="included.css">
<style>
.standard_label_style, label { }
</style>
</head>
<body>
<label class="standard_label_style">Test Label</label><br/>
<label>Unclassed Test Label</label>
</body>
</html>
CSS doesn't really work like that.
You can apply a style to all labels directly:
label {
color: Lime;
}
or apply a class to all labels
.labelClass {
color: Lime;
}
<label class="labelClass"></label>
You can also have multiple selectors, so you could ammend your current style to be
.labelClass, label {
color: Lime;
}
What you can't do in standard CSS is something like
label {
.labelClass;
}
The good news is that there are a bunch of server side libraries which make CSS suck less and let you do exactly this kind of thing, see for example dotLess if you're using .NET which provides nested rules and a basic inheratance model.
To apply a style to every label on the page, use this CSS:
label {
/* styles... */
}
If you have an existing style (e.g. "standard_label_style") in the CSS already, you can apply that to every label:
.standard_label_style, label {
/* styles... */
}
This will affect every label through the site, so use with caution!
In your css file, can't you just put
.standard_label_style, label
{
//styles
}
.standard_label_style, label {
/* stuff */
}
I'm not sure you can... one possible workaround (feels a bit hackish though) is to attach the style to your body tag, then change the css to be this:
body.standard_label_style label{
//Your styles here
}
One of the most underused CSS tricks of all time: Give your bodies an id or class!
HTML:
<body id="standard_label_style">
<label>Hey!</label>
</body>
CSS:
#standard_label_style label{
the styles
}
will take the styles, while
HTML:
<body id="custom_label_style">
<label>Custom!</label>
</body>
Will not.
You are dealing here with CSS precedence. Declarations which are "more vague" (body tag, classes) are applied before declarations which are "less vague" (specific elements, inline CSS).
Thus your answer depends on how the stylesheet is defining label styles. If for example it says label {...}, then that's fairly specific, and your best bet is to use a more specific CSS style, see:
http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/ (good tutorial?)
CSS precedence
The level of "specificity" you need to override, as I said, depend on how specific your other stylesheet was. According to the link, "CSS embedded in the html always come after external stylesheets regardless of the order in the html".
There is also a chance that if you yourself define label {your custom css} that should work, if you import your stylesheet afterwards. It is what I would try first to see if it works. Have you tried this? What was the result?
Note that if you want to completely override the other stylesheet, you will need to also reset any CSS you are not using by settings its values to inherit or as appropriate.