I found a CSS structure which can make my radio buttons work with custom background images. But they all have the same background image. Is it possible to write a structure so that each individual radio button has it's own background image but the functionality stays the same.
I am pasting a JsFiddle example: JSFiddle example
For example I want the last radio button "Melons" to have a different background image. How can I do this?
The CSS so far:
input[type="radio"] {
display:none;
}
input[type="radio"] + label {
display:inline;
font-size: 18px;
}
input[type="radio"] + label:before {
content: '';
display:inline-block;
width: 32px;
height: 32px;
background: url(http://dl.dropbox.com/u/51558405/radio-checked.png) no-repeat;
vertical-align: middle;
}
input[type="radio"]:checked + label:before {
content: '';
background: url(http://dl.dropbox.com/u/51558405/radio-unchecked.png) no-repeat;
}
Working and expandable code. Live Demo
The name of all radio buttons should be same for them to work as a group. I have added class="class1" to normal entries and class="class2" to special entry.
HTML
<li>
<input class="class1" type="radio" id="radio" name="radios" checked />
<label for="radio">Apples</label>
</li>
<li>
<input class="class1" type="radio" id="radio2" name="radios" />
<label for="radio2">Pineapples </label>
</li>
<li>
<input class="class1" type="radio" id="radio3" name="radios" />
<label for="radio3">Pomarance</label>
</li>
<li>
<input class="class2" type="radio" id="nekaj" name="radios" />
<label for="nekaj">Pomarance123</label>
</li>
CSS
input[type="radio"][class="class1"] + label:before {
content: '2';
display:inline-block;
width: 32px;
height: 32px;
background: url(http://dl.dropbox.com/u/51558405/radio-checked.png) no-repeat;
vertical-align: middle;
}
input[type="radio"][class="class1"]:checked + label:before {
content: '3';
background: url(http://dl.dropbox.com/u/51558405/radio-unchecked.png) no-repeat;
}
input[type="radio"][class="class2"] + label:before {
content: '444';
display:inline-block;
width: 32px;
height: 32px;
background: url(http://www.clker.com/cliparts/M/2/V/6/F/u/radiobutton-checked-sm-th.png) no-repeat;
background-size:100% auto;
vertical-align: middle;
}
input[type="radio"][class="class2"]:checked + label:before {
content: '444';
display:inline-block;
width: 32px;
height: 32px;
background: url(http://www.clker.com/cliparts/M/2/V/6/F/u/radiobutton-checked-sm-th.png) no-repeat;
background-size:100% auto;
vertical-align: middle;
}
You can overwrite your css. put this css after your input[type="radio"]:checked + label:before css
#radio4 + label:before {
content: '';
background: url(your image path);
}
hope this will help.
Thank you,
I also doing same but my problem is different browsers shows diffrent alignment, vertical alignment of radio buttons is not proper, specially google-chrome on mac never shows correct alignment
Related
I wanted to use image instead of regular radio inputs.
I made it this way:
input[type="radio"]{
content:url('/images/new-home-page/Checkbox.png');
height:3vh;
width:3vh;
}
input[type="radio"]:checked{
content:url('/images/new-home-page/checkedCheckbox.png');
}
Unfortunately, they have circles around them. I have tried to use border:none or text-decoration:none but it doesnt help. Could someone help me with this please?
They look like this now:
I would request you to use the appearance property of CSS, which is responsible for the components like this. So setting the appearance: none will make a kind of display: none to the component's appearance, which is what is needed for you. You are good to use this bit of CSS to make the component not display, while keeping the element in the view:
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
Snippet
input {
content: url('http://i.stack.imgur.com/M3EkO.png');
height: 16px;
width: 16px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
input:checked {
content: url('http://i.stack.imgur.com/Ialva.png');
}
Checkbox:
<input type="checkbox" name="" id="" /> <br />
Radios:
<input type="radio" name="Hi" id="" />
<input type="radio" name="Hi" id="" />
Output: http://output.jsbin.com/digebimolu/1
You must hide radio buttons and add more elements like <span> and <label>
Here is how it should work: http://jsfiddle.net/etz9Lfat/
Here is a another interesting solution, using pseudo element, where you also get rid of the surrounding focus outline.
The really good with this is it works on IE 8-11 as well, which unfortunately the better solution using appearence don't.
input[type="radio"] {
display:none;
}
input[type="radio"] + label {
position: relative;
padding-left: 54px;
cursor:pointer;
font-size: 26px;
}
input[type="radio"] + label:before {
content: "";
position: absolute;
left: 0;
top: 50%;
margin-top: -22px;
width:46px;
height:46px;
background: url('http://i.stack.imgur.com/M3EkO.png');
background-size: contain;
}
input[type="radio"]:checked + label:before {
background: url('http://i.stack.imgur.com/Ialva.png');
}
<input id="cb" value="1" name="cb" type="radio">
<label for="cb">Text 1</label>
<input id="cb2" value="2" name="cb" type="radio">
<label for="cb2">Text 2</label>
i would suggest a whole other solution.
input[type="checkbox"], input[type="radio"] {
display:none;
}
input[type="checkbox"] + label{
padding-left:35px;
}
input[type="checkbox"] + label span {
display:inline-block;
width:52px; /* width of the checkbox */
height:53px; /* height of the checkbox */
margin:-1px 10px 0 -35px;
vertical-align:middle;
background:url('http://i.stack.imgur.com/M3EkO.png') left top no-repeat;
cursor:pointer;
}
/* replaces the image if checked.*/
input[type="checkbox"]:checked + label span {
background:url('http://i.stack.imgur.com/Ialva.png') left top no-repeat;
}
<input id="cb" value="" type="checkbox">
<label for="cb"><span></span> Text</label>
With this Solution you wont have any Problems in all browsers.
It will hide the checkbox itself, but it still works because you can click the label, which is connected to the checkbox.
In this label there is a span with your background image and the sizes of it. So it still looks like a checkbox and your hidden checkbox will be "checked" or "unchecked"
Add this in your css file:
input[type=radio]{
display:none;
}
Here is a simple work around to get customized radio buttons
https://jsfiddle.net/sudheer219/fj8heLcp/
Code:
[HTML]
<ul>
<li>
<input type='radio' value='1' name='radio' id='radio1'/>
<label for='radio1'><span></span>Value 1</label>
</li>
<li>
<input type='radio' value='2' name='radio' id='radio2'/>
<label for='radio2'><span></span>Value 2</label>
</li>
<li>
<input type='radio' value='3' name='radio' id='radio3'/>
<label for='radio3'><span></span>Value 3</label>
</li>
</ul>
[CSS]
ul {
list-style: none;
}
li {
display: inline-block;
margin-right: 15px;
}
input {
visibility: hidden;
}
label {
cursor: pointer;
}
input:checked+label span {
background: red;
}
span {
display: inline-block;
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px inset #444;
position: relative;
top: 3px;
margin-right: 4px;
}
I am adding background image on radio button. But my issue is image is not on checked or click on radio button(background image).
Here is my code
.form-group input[type="radio"] {
display: none;
}
.gender input[type="radio"] + label::after {
background:url('img/male.png') no-repeat -7px -81px;
width: 28px;
height: 56px; }
.gender input[type="radio"]:checked + label::before {
background:url('img/m-f-icon.png') no-repeat;
width: 28px;
height: 56px;
display: inline-block;
position: relative;
content: ' ';
margin-right: 10px;
cursor: pointer;
background-position-x: -45px;
}
<div class="form-group gender">
<label class="control-label col-xs-2">I'm a</label>
<div class="col-xs-1">
<input type="radio" class="male" name="genderRadios" value="male">
<label class="radio-inline gender"></label>
</div>
<div class="col-xs-1">
<input type="radio" class="female" name="genderRadios" value="female">
<label class="radio-inline gender"></label>
</div>
</div>
Kindly advise me any solution.
Please find demo below I have put together, this is the correct structure you should be using with the appropriate for specified on each of your labels that match the related radio button. You can switch out the background colours for background images of your choice.
JSFiddle:
https://jsfiddle.net/kdrh56md/
I am trying to use images in place of radio buttons. When I don't use images I can select the 'male/female' value correctly. However, when I stylize the css to use images the value always defaults to male. The image used is a sample. Can you please help point out my error in the code below. Also, can anyone provide any pointers on how to use different images for the different radio buttons.
HTML:
<input type="radio" id="genderMale" name="gender" value="male"/>
<label for="genderMale"></label>
<input type="radio" id="genderFemale" name="gender" value="female"/>
<label for="genderFemale"></label>
CSS:
input[type="radio"] {
display:none;
}
input[type="radio"] + label {
display:inline;
font-size: 18px;
}
input[type="radio"] + label:before {
content:'';
display:inline-block;
width: 320px;
height: 320px;
background: url(http://www.clker.com/cliparts/T/2/s/A/0/e/male-bathroom-bw-w-o-boarder-md.png) no-repeat;
vertical-align: middle;
}
input[type="radio"]:checked + label:before {
content:'';
background: url(http://www.clker.com/cliparts/T/2/s/A/0/e/male-bathroom-bw-w-o-boarder-md.png) no-repeat;
border-style: solid;
border-width: 10px;
}
You don't need to use :before for this when you can just place the img tag within your label like so:
<input type="radio" id="genderMale" name="gender" value="male"/>
<label for="genderMale">
<img src="..." />
</label>
<input type="radio" id="genderFemale" name="gender" value="female"/>
<label for="genderFemale">
<img src="..." />
</label>
And then remove the :before from your CSS
Fiddle: http://jsfiddle.net/L94mK/
As far as i can see, it's returning the proper value... check this JSFiddle
as for giving different images for the radio buttons, you can use nth-child css selector as follows:
input[type="radio"]:nth-child(1) + label:before {
content:'';
display:inline-block;
width: 320px;
height: 320px;
background: url(http://www.clker.com/cliparts/T/2/s/A/0/e/male-bathroom-bw-w-o-boarder-md.png) no-repeat;
vertical-align: middle;
}
input[type="radio"]:nth-child(3) + label:before {
content:'';
display:inline-block;
width: 320px;
height: 320px;
background: url(some other url for female image) no-repeat;
vertical-align: middle;
}
Check this JSFiddle
Hi I know this has been answered but I can't get it to work for me.
I have as HTML
<input type="hidden" name="data[Child][remember_me]" id="am_2_" value="0"/>
<input type="checkbox" name="data[Child][remember_me]" class="checkboxLabel main_street_input" id="am_2" value="1"/>
<label for="am_2"> </label>
and then
.amPmCheckbox input[type="checkbox"]{
display: none;}
.amPmCheckbox input[type="checkbox"]+label{
background: url('http://renegadeox.com/img/off.png') no-repeat; width:16px; height:17px;}
.amPmCheckbox input[type="checkbox"]:checked + label {
background: url('http://renegadeox.com/img/on.png');width:16px; height:17px;}
But it's not picking up the checked image. I can't figure out what's the problem, anyone any ideas? heres a fiddle btw
http://jsfiddle.net/ksCk8/
It picks up the checked image when the checkbox is checked. Issue you have is the fact nothing is clickable to make the checkbox checked.
Move the AM/PM into the label and use padding to shove it over instead of the spaces.
HTML:
<div class="amPmCheckbox">
<input type="checkbox" name="data[Child][remember_me]" class="checkboxLabel main_street_input" id="am_2" value="1" />
<label for="am_2">AM</label>
</div>
CSS:
.amPmCheckbox input[type="checkbox"] {
display: none;
}
.amPmCheckbox input[type="checkbox"]+label {
background: url('http://renegadeox.com/img/off.png') no-repeat;
height:17px;
padding-left: 18px;
}
.amPmCheckbox input[type="checkbox"]:checked + label {
background: url('http://renegadeox.com/img/on.png') no-repeat;
height:17px;
}
http://jsfiddle.net/JkDhN/1/
Is there any way to make a radio button bigger using CSS?
If not, how else can I do it?
Try this code:
input[type='radio'] {
transform: scale(2);
}
You can easily able to set it's height and width as with any element.
Here is the fiddle with code
JSFIDDLE BIG RADIO BUTTON
HTML
<input id="r1" type="radio" name="group1" class="radio1" />
<label for="r1">label 1 text</label>
<input id="r2" type="radio" name="group1" class="radio2" />
<label for="r2">label 2 text</label>
<input id="r3" type="radio" name="group1" class="radio3" />
<label for="r3">label 3 text</label>
<input id="r4" type="radio" name="group1" class="radio4" />
<label for="r4">label 4 text</label>
CSS
input[type=radio] {
display: none;
}
input[type=radio] + label::before {
content: '';
display: inline-block;
border: 1px solid #000;
border-radius: 50%;
margin: 0 0.5em;
}
input[type=radio]:checked + label::before {
background-color: #ffa;
}
.radio1 + label::before {
width: 0.5em;
height: 0.5em;
}
.radio2 + label::before {
width: 0.75em;
height: 0.75em;
}
.radio3 + label::before {
width: 1em;
height: 1em;
}
.radio4 + label::before {
width: 1.5em;
height: 1.5em;
}
Styling radio button is not easy.
Form elements in general are either problematic or impossible to style using CSS alone.
Just go through this link for your own style with bigger size for radio buttons..
Also look at this link...
Bigger radio buttons
Don't use transform: scale(1.3), it really looks horrible. Just use this:
input[type='radio'] {
height: 15px;
width: 15px;
vertical-align: middle;
}
<input type="radio">Select this item
You can do it using CSS but browser and OS also impact on this. Look at following article.
Styling radio buttons with CSS
Try this:
HTML
<label>
<input type="radio" value="1">
<div></div>
</label>
CSS
input[type="radio"] {
display: none;
}
input[type="radio"] + div {
height: 20px;
width: 20px;
display: inline-block;
cursor: pointer;
vertical-align: middle;
background: #FFF;
border: 1px solid #d2d2d2;
border-radius: 100%;
}
input[type="radio"] + div:hover {
border-color: #c2c2c2;
}
input[type="radio"]:checked + div {
background:gray;
}
DEMO: http://jsfiddle.net/nuzhysgg/
There might be some quirky <span> tricks inside radio elements but I imagine using them across different browsers would be annoying to debug.
I've used this script in the past but not recently.
CSS3 transform scale is blurry. Setting height & width does not work with FF (even the newest 66 does not support, 2020). The only cross-browser solution is custom HTML markup + CSS, which unfortunatelly is not the easiest way. See helpful tutorial custom radios & checkboxes.