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/
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.
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 simply don't find any instructions how to style a radio button like the div in my example here: http://jsfiddle.net/Q5SRe/
The div:
div {
width:50px;
height:50px;
background-color:green
}
also I would like that when the radio button is selected it has:
border: medium solid #000;
Radio buttons are part of the Shadow DOM, which as of yet can't be universally styled across browsers.
The best way currently to get custom radio buttons is to use images or the checkbox hack.
I have used this before, it is not cross browser compatible and I would recommend you keep things simpler, but that depends on your personal choice and use case
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).
It's difficult to style submit inputs without using images or javascript.
As I know there is no way to insert HTML code right into the sumbit input value. And if I wrap submit input in a div element (for example to add multiple borders), not the whole area will be clickable.
Will a click on a label cause the submitting of the form in all browsers?
<form method="test.rb">
<input type="text" name="test" id="test" />
<label for="button">
<input type="submit" name="button" id="button" value="Send!" />
</label>
</form>
According to the W3C on associating labels:
The label element is not used for the following because labels for these elements are provided via the value attribute (for Submit and Reset buttons), the alt attribute (for image buttons), or element content itself (button).
Thanks to #Jeremiah Isaacson for pointing that out.
Old Answer
Yes, this will work. I can't validate the behavior across all browsers, but here is what W3C spec has to say:
To associate a label with another
control implicitly, the control
element must be within the contents of
the LABEL element ... When a LABEL
element receives focus, it passes the
focus on to its associated control.
So, I guess by clicking the LABEL, you are essentially clicking the submit input.
Thanks to #stevelove for pointing out the feasibility of this.
If the issue is putting HTML code inside your button, you should use <button> which will allow you to do just that.
<button type="submit" name="button" id="button"><img src="button.png" />Send!</button>
But to answer your question about the <label>: No, that will not work. Apparently it will work, and after giving it some thought, I see no reason why it shouldn't.
it's difficult to style submit inputs without using images or javascript.
It's very easy to style inputs without using javascript or images.
using css - style for all submit buttons - input[type=submit] or use a class input.submit-btn applied to specific elements
you can style colour, border, background, padding, position, font weight, gradients, drop shadows..all number of effects using css...
voila sexy button -
input[type=submit] {
padding:4px;
color: #fff;
margin-top: 10px;
background-color: #e96000;
border: none;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff6900), to(#e96000));
background: -moz-linear-gradient(25% 75% 90deg, #e96000, #ff6900);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}