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
Related
I'm playing around with some Expand Boxes.
I'm trying to create an HTML + CSS Expand Box without using JavaScript.
For now my code looks something like this:
/* no js */
.expand_box{}
.expand_box > .expand_box_checkbox{
display: none;
}
.expand_box > .expand_box_headline{}
.expand_box > .expand_box_content{
display: none;
}
.expand_box > .expand_box_checkbox:checked + .expand_box_headline + .expand_box_content{
display: block;
}
<div class="expand_box">
<input id="eb1" class="expand_box_checkbox" type="checkbox" />
<label for="eb1" class="expand_box_headline">click me</label>
<div class="expand_box_content">
Content to see after clicking on "click me"
</div>
</div>
Now, this is actually a nice solution, as it doesn't depend on JS and runs on practically every device.
What I am wondering about:
I am using the checkbox as a storage for state-information.
But this piece of information technically doesn't belong into the HTML, as I only use it for styling.
Is there any way to keep track of the state "user activated the 'click me' button", using pure CSS?
I know of the existence of CSS-variables. Maybe I can use them in some way?
HTML5 has a native control for expand box. It's details/summary elements. In supporting browsers it doesn't need JS and needs CSS only for custom styling. It may need a bit of JS only to work in non-supporting browsers (as a polyfill).
Besides hidden checkbox hack, CSS itself has another possibility to "emulate" states with the very long transition delay (like described here, warning: the example uses unitless 0 value of transition-duration which seems not working anymore, but it works with 0s instead). But these solutions are also too hacky. CSS was never supposed to maintain states, but it's excellent in presenting them.
For HTML tags such as <input type="hidden"> when I look at the browser's standard CSS, I see:
input[type="hidden" i] {
display: none;
}
So I added this to my CSS:
input[type="hidden" i] {
display: block !important;
}
And for HTML I have <input name=countrycode type=hidden value=US>
When I open up the developer tools I can see that the old display:none is ignored, however, the field never shows up in the page and is still hidden!
Why doesn't the browser follow my CSS rules, is there another way to force it to do so? If I add width: 200;height:200;background: black this should make it appear in the page, right?
The reason I want to do this is because I have a lot of hidden inputs in many pages that now I want them to be visible (to get input from user) so I decided to do it fast with CSS. I know this can be easily done with JavaScript, but just curious why CSS is not working or maybe it will work on other browsers but not Google Chrome?
The reason that your input[type=hidden] is hidden, is because it doesn't have a control type to show the user it's value, so your display: block; should work, but the browser'll have nothing to render. Your hidden input could be a checkbox, a text field or a number.
More info: https://www.w3.org/wiki/HTML/Elements/input
You should give that input an id="countrycode" and just use javascript to set the value of type attribute from "hiden" to "text" like this:
document.getElementById("countrycode").setAttribute("type", "text");
OR if you prefer to use the name attribute, then do this:
document.getElementByName("countrycode").setAttribute("type", "text");
Voila!
I've been searching for a solution to this problem for a few hours now without any luck. Seems like everyone uses a background image to solve their problem, and I only want to use a color so the solution scales better without extra CSS needed for mobile devices.
I almost have a working solution, but 1) the "checkbox" is not clickable like the rest of the label; 2) I just can't seem to find any way to add space between the label and the "checkbox" without altering the HTML (something that I prefer not to do, but will try if there's no workable CSS-only or JQuery solution).
Here's the HTML:
<div id="edit-field-school-education-und" class="form-checkboxes">
<div class="form-item form-type-checkbox form-item-field-school-education-und-28">
<input type="checkbox" id="edit-field-school-education-und-28" name="field_school_education[und][28]" value="28" checked="checked" class="form-checkbox">
<label class="option" for="edit-field-school-education-und-28">Evening Classes & Distance Learning </label>
</div>
...... Repeated for several checkboxes .......
</div>
Here's my CSS so far:
.form-checkbox {display:none}
.form-checkbox + label:before {content: "\00a0\00a0\00a0\00a0"; height: 19px; width: 19px; border: 1px solid black; cursor:pointer; }
input[type="checkbox"]:checked + label:before {background-color: #34c1ce;}
I prefer a CSS3 solution, but would be okay with a generic HTML or JS solution. I can't have a solution based on IDs etc. since the checkbox list may grow at any time. However, I could probably figure out a way to output a div with the same label text.
You cant set a background color to a checkbox it is rendered depending on the browser not the css, But you could set a background image here is a handy tutorial
http://www.whatstyle.net/articles/18/pretty_form_controls_with_css
Best option is to create your own checkboxes with buttons and JavaScript or use a JavaScript UI. This however means that it doesn't work if JavaScript isn't enabled so you may wish to create a fallback (have a checkbox shown by default and use JS to switch it out with the custom one).
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
css file:
.radio {
background: url(images/radio-off.png) no-repeat;
height: 21px;
width: 21px;
}
html file:
<input type="radio" name="sendmail" class="radio" value="send" />
It still doesn't show the background, it still shows the "classic" one. What am I doing wrong?
Thank you.
You didn't mention what browser you're using - this is important information.
The ability to style radio buttons (and form elements in general) varies a lot between different browsers.
See here: http://www.456bereastreet.com/lab/form_controls/radio_buttons/
The usual workaround is to use JavaScript to replace the radio buttons with custom elements, that you can style however you like.
For example: jqTransform.
You can't style radio buttons like that because they are native O/S controls.
The solution, for now anyway, is to overlay an element that mimics a radio button on top of the original radio.
Check out input enhancement libraries such as http://www.emblematiq.com/lab/niceforms/.
The best way to do this is with Javascript to ensure cross browser compatibility.
You can use the following script.
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/