Is it possible to style the HTML checkbox without using javascripts?
This code for example will work fine with IE, but not on Firefox or Chrome.
http://jsfiddle.net/5wJxF/
Any suggestions?
YES. It is possible.
You can't directly style the checkbox element, but the effect you're looking for can be achieved if you use a <label> element in conjunction with the checkbox, and style that.
<input type="checkbox" id="field1" class="mycheckbox" />
<label for="field1" class="mycheckbox-label">Label here</label>
And then your CSS would look like this:
.mycheckbox {
display:none;
}
.mycheckbox + label {
padding:20px; /*or however wide your graphic is*/
background:url(/fancy-unchecked.gif) no-repeat left center;
}
.mycheckbox:checked + label {
background:url(/fancy-checked.gif) no-repeat left center;
}
Here is a working example: http://jsfiddle.net/TVaPX/ (tested with Firefox 5)
The trouble with this approach is that it only works in modern browsers. Older browsers may not support the :checked or + CSS selectors. But if you're okay with not supporting older versions of IE, then this will work. The example above does not work in IE8 (it supports + but not :checked).
If you're not comfortable with that, then you'll have to stick with a Javascript solution.
However, with an approach similar to this, you can still do it with very minimal amounts of Javascript code: simply have a one-line JS that toggles the class of the checkbox when it's checked, and you can use all the above code, but with the alternate classname instead of the :checked selector. That will work in IE7 and IE8.
Hope that helps.
No, it is not possible. The appearance of the checkboxes is OS- and browser-specific. Only JavaScript-based solutions let you style them in a way that will work across all browsers.
You might like this plugin. It's easy to use and gives satisfying results.
You can style it with CSS3(Chrome or Safari only!), but for anything esle - no other way that js.
There are 40+ examples here: FORMS ENHANCEMENTS DEMOS
There are some plug ins - I used to use jNice - not just pure CSS3 for modern browser and standard checkbox/dropdown for anything else.
Best Regards,
Pete
Related
How can I remove the small square arround the radio button that gets displayed when the input gets focused?
I'm pretty sure this is a duplicate, but I don't know what the square is actually called and couldn't find what I'm looking for.
I tried autocomplete="off" on the input. I played arround with jQuery's preventDefault but without success.
Update:
Thanks for your responses. If anyone comes accross this question, here is the effect of appearance attached (upper pic without appearance, the one below is with appearance) with Firefox:
Just in case someone comes to the same problem.
Update with Chrome / Safari, appearance removes the input
-webkit-appearance: none; would make the radio buttons disappear in
Chrome and Safari. check jsfiddle.net/8uY6H (with Chrome)
– noted by JFK 6
Try this CSS since it is an outline:
input[type="radio"]:focus {
outline:none;
}
Try outline:0 property for the radio button on focus
input[type="radio"]:focus{
outline:0;
}
You need to set:
outline:none;
On the :focus state of the CSS class relating to the checkbox, or directly e.g.
input[type="radio"]:focus{
outline:none;
}
The crucial part is setting outline
The CSS outline property is a shorthand property for setting one or
more of the individual outline properties outline-style, outline-width
and outline-color in a single rule. In most cases the use of this
shortcut is preferable and more convenient.
However, also setting appearance may help cross platform where different browsers render checkbox elements differently.
As noted in the comments below though, this will cause the checkbox to not display in some circumstances- so you would need to produce a pure CSS solution.
The -moz-appearance CSS property is used in Gecko (Firefox) to display
an element using a platform-native styling based on the operating
system's theme.
This property is frequently used in XUL stylesheets to design custom
widgets with platform-appropriate styling. It is also used in the XBL
implementations of the widgets that ship with the Mozilla platform.
As simple as
input[type="radio"] {
outline: 0 none;
}
JSFIDDLE
I have 2 display rules that i can't get to work
I can't use the display property with IE version < 10, i'm using this code:
Comments(<fb:comments-count href="http://mypage"/></fb:comments-count>)
That results in:
Comments(<fb:comments-count href="http://mypage" fb-xfbml-state="rendered" class=" fb_comments_count_zero">
<span class="fb_comments_count">
10
</span>
</fb:comments-count>)
With this css:
.fb_comments_count {
display: inline;
}
.fb_comments_count_zero {
display: inline;
}
It displays:
Comments(
10
)
instead of
Comments(10)
I tried also changing
display:inline
to
display:inline-block
But it's not working.
The other issue i'm having is when i use display:none. In fact, IE<10 doesn't hide what i'm styling, but IE10, chrome, opera and firefox don't have that problem.
How can i fix this?
P.S. I prefer not to use JavaScript, because i want my site to look good even if javascript is disabled.
You're using dashes instead of underscores in your CSS.
.fb-comments-count {
display: inline;
}
Try changing it to:
.fb_comments_count {
display: inline;
}
Internet Explorer will not style any element it is not aware of. That is why there is a HTML5 shim javascript; to inform IE of the new HTML5 elements (insert them into the DOM). Other browsers won't have this issue.
Im not entirely sure how FBML gets rendered in the end, but older IEs don't recognize custom tags and won't apply css to them, so this might be the issue. You need to "register" the tags to the IE.
Also you should avoid the linebreaks in your span:
<span class="fb_comments_count">10</span>
this already might fix your first problem, if not try to apply white-space:nowrap;.
ie has always had a problem with braking lines where it should not try adding this to your css
white-space:nowrap;
If that does not work then please tell me what happens.
I have had these problems before with ie so it not just you.
also try wrapping your fb tag in a p tag then add a style of choice to the p tag.
In all major browsers except IE9, it colors a disabled option's text to red this code:
<option disabled='disabled' class='red' value=''>No Students available to take up Assessment</option>
...
//CSS
.red{
color:red;
}
But in IE, it does not changed text color, it keeps it a grey disabled color. How can I get the disabled color to change in IE9?
perhaps use the attribute selector in CSS?
option:disabled,
option[disabled] {
color: red;
}
Something like this?
select :disabled.red {
color: red;
}
Here's a document about the :disabled pseudo-class from Microsoft.
Here's a fiddle that should work in IE9 and up.
Update: This seems to work only in IE>8. This answer points out the workaround of using the readonly attribute on form elements. That's not an option for the option tag though.
There are JavaScript workaround for old IEs around. A simple Google search led me to this site which provides a jQuery solution.
From the blog:
By adding a little css styling magic and you end up with an identical
outcome in all other modern browsers.
You can then enable and disable using javascript. Many people have
written code which makes an option look like it’s disabled, waits for
a click on the option element and then bluring it or focusing the next
/ previously selected option to make it act like it’s disabled.
I have come up with functions used with jQuery to disable / enable a
select option by converting it to an optgroup and back. It is tested
in firefox 2 & 3, safari 3, ie 6 + 7, and it works in Opera 9
(although the opgroups jump to the bottom)
Let's say I have a basic webpage:
<LABEL ID="THE_LABEL" FOR="THE_CHECKBOX"><INPUT TYPE=checkbox ID="THE_CHECKBOX"/> Blue when checked!</LABEL>
Now let's say that I want the label text to be red when it's unchecked and blue when it's checked. How would I do this? I want something as basic as the following. Here, I use a hypothetical operator "<", which would mean "has the child", but of course it won't work, as there's no such operator:
#THE_LABEL{
color:red;
}
#THE_LABEL < #THE_CHECKBOX[checked]{
color:blue;
}
Everything but the theoretical "<" is valid CSS, which makes me wonder if there's a real way to achieve this behavior. Does anyone know of a valid CSS 3 (or lower version) way to style a label based on the state of its checkbox, without using JavaScript?
You shouldn't be putting the input field within the label.
Since the contents of the label appear after the checkbox, just make your HTML this way:
<INPUT TYPE=checkbox ID="THE_CHECKBOX"/>
<LABEL ID="THE_LABEL" FOR="THE_CHECKBOX">Blue when checked!</LABEL>
And then use this CSS:
#THE_LABEL {
color: red;
}
#THE_CHECKBOX:checked + #THE_LABEL {
color: blue;
}
Live demo
The + is a sibling selector. It is not supported by IE8 and below.
Sorry, see:
Is there a CSS parent selector? and Complex CSS selector for parent of active child
for more discussion about this topic, but it doesn't seem to be possible.
I believe this will work in CSS4, but that's really just theoretical for now:
#THE_LABEL{
color:red;
}
#THE_LABEL /for/ :checked {
color:blue;
}
JSFiddle test
Browser Support
I come back to this every couple months just to check. Here's the support status for modern versions of the following layout engines:
WebKit: NO (Safari, iOS web views)
Blink: NO (Chrome, Chromium-based browsers, many open-source projects, Android web views)
Gecko: NO (Firefox, many open-source projects)
Trident: NO (IE, Windows web views, Steam)
EdgeHTML: NO (Microsoft Edge)
The CSS has selector is slowly being implemented across browsers.
Currently, according to caniuse.com, it has 56.19% support globally.
Using this selector you can achieve what your original question asked for: styling a label based on the checked state of a nested checkbox.
The codepen showing the example is here and the html used in the example is below. Note, this will work in Chromium browsers but not in Firefox at the moment (see the canIUse page referenced above for more on supported browsers).
<style>
label {
color: red;
}
label:has(> input[type='checkbox']:checked) {
color: blue;
}
</style>
<label>
Me blue when checked.
<input type="checkbox">
</label>
I'm designing a html page with strict doctype and there's a form element in my page.
What I want to do is to change background-color of inputbox when mouse touches my form. I've done this with css :hover selector on form tag, but problem is that IE only understands hover on "a" tag!
I've googled my problem and what I found is to:
using an htc file;
using javascript to create a hover class on elements;
creating a big "a" tag and put all elements inside it;
but I don't want to do any of these solutions!
Isn't there any better way to fix this problem in IE?
My HTML Code:
<form id="footer-search-form" title="Search" action="#action">
<fieldset>
<input type="text" class="footer-search-input" id="q" name="Search"></input>
<input type="button" class="footer-search-button" title="Search" value="Search"></input>
</fieldset>
</form>
My CSS Code:
#footer-search-form:hover .footer-search-button { background-color: #fff; }
#footer-search-form:hover .footer-search-input { background-color: #fff; }
Update: and after hours of searching I did it by using js:
onmouseover="this.setAttribute(document.all?'className':'class','footer-search-hovered');" onmouseout="this.removeAttribute(document.all?'className':'class','footer-search-hovered');"
and
.footer-search-hovered .footer-search-input, .footer-search-hovered .footer-search-button { background-color: #fff !important; } /* For IE6 compatibility */
I hate it, but it seems that there's no better way...
You're really only going to run into trouble if your users are using IE6. The majority of web developers nowadays don't even bother providing support for such an old browser, so I wouldn't worry about it.
IE has supported :hover on any element since IE8 (or even IE7? I don't remember), which has been released for over three years. Admittedly far too many people still use IE6 (mostly because IE doesn't have an auto-updater - it really needs one), but for something as simple as this aesthetic effect you really don't need to worry about support in old relics.