There is a post that is on StackOverflow that explains how to change the style of a radio button: Styling radio button
Here's the code provided in that post:
input[type="radio"] {
display: none;
}
.graphical-radio {
background: gray;
display: inline-block;
width: 30px;
height: 30px;
border-radius: 100%;
}
input[type="radio"]:checked + .graphical-radio {
background: red;
}
<ul>
<li>
<label>
<input class="wpProQuiz_questionInput" type="radio" name="question_1_2" value="3" />
<span class="graphical-radio"></span>
Non riesco a lasciarlo solo
</label>
</li>
</ul>
It explains that I have first to insert a <span> after each radio button but I have no idea how insert a <span>.
How do I insert <span> in every possible answer in Wordpress?
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'm trying to style my radio buttons but for some reason it's not working. If I click on the one radio button then it works but the problem comes in is when I click on another radio button. What happens is that the first one I clicked stays checked and the second one I click is also checked instead of the first one becoming unchecked.
My html
<li>
<label>* Title</label>
<div class="registration_title">
<input id="mr" type="radio" name="title[mr]" value="Mr">
<label for="mr"><span></span>Mr.</label>
<input id="mrs" type="radio" name="title[mrs]" value="Mrs">
<label for="mrs"><span></span>Mrs.</label>
</div>
my css
input[type="radio"] {
display: none;
}
input[type="radio"] + label {
color: green;
}
input[type="radio"] + label span {
background: none repeat scroll 0 0 black;
border-radius: 50%;
cursor: pointer;
display: inline-block;
height: 19px;
margin: -1px 4px 0 0;
vertical-align: middle;
width: 19px;
}
input[type="radio"]:checked + label span {
background: pink;
}
Here is a jsfiddle: JSFIDDLE
The name should be same in radio buttons..
try this..
<div class="registration_title">
<input id="mr" type="radio" name="title" value="Mr">
<label for="mr"><span></span>Mr.</label>
<input id="mrs" type="radio" name="title" value="Mrs">
<label for="mrs"><span></span>Mrs.</label>
</div>
here is the FIDDLE
refer THIS to understand about radio buttons
Try to use name as common for radio buttons you used like this:
HTML:
name="title[mr]"
Demo
I am trying to style my checkboxes with Font Awesome, the checkboxes are auto generated from a plugin I"m using with wordpress I have a mockup of what everything looks like in JSFiddle
http://jsfiddle.net/bBPY5/1/
It seems to be something a bit wrong with my CSS but I can't figure out what.
<div id="sidebar-cards-archive">
<ul>
<li class="cat-item cat-item-12">
<label>
<input type="checkbox" name="ofcards-rarity[]" value="12">Common (223)</label>
</li>
<li class="cat-item cat-item-14">
<label>
<input type="checkbox" name="ofcards-rarity[]" value="14">Epic (40)</label>
</li>
<li class="cat-item cat-item-11">
<label>
<input type="checkbox" name="ofcards-rarity[]" value="11">Free (83)</label>
</li>
<li class="cat-item cat-item-15">
<label>
<input type="checkbox" name="ofcards-rarity[]" value="15">Legendary (36)</label>
</li>
<li class="cat-item cat-item-13">
<label>
<input type="checkbox" name="ofcards-rarity[]" value="13">Rare (84)</label>
</li>
</ul>
</div>
Here is the CSS
#import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
#sidebar-cards-archive ul li {
list-style: none;
}
/*** custom checkboxes ***/
input[type=checkbox] {
display:none;
}
/* to hide the checkbox itself */
input[type=checkbox] + label:before {
font-family: FontAwesome;
display: inline-block;
}
input[type=checkbox] + label:before {
content:"\f096";
}
/* unchecked icon */
input[type=checkbox] + label:before {
letter-spacing: 10px;
}
/* space between checkbox and label */
input[type=checkbox]:checked + label:before {
content:"\f046";
}
/* checked icon */
input[type=checkbox]:checked + label:before {
letter-spacing: 5px;
}
/* allow space for check mark */
Ok, that CSS you have won't work because its wrong.
Why? Because when you say "input + label", you should have an HTML markup like the one below:
<input type="checkbox" name="ofcards-rarity[]" value="15">
<label>Legendary (36)</label> //You will be querying this label css with input + label
See, <label> is placed immediately after <input>. You can confirm this HERE
Now in your case, your <input> was a child of you <label>, looking like this:
<label>
<input type="checkbox" name="ofcards-rarity[]" value="15">Legendary (36)
</label>
To query that, you could have done something like this:
label>input[type=checkbox] {
}
label>input[type=checkbox]:checked {
}
And since you wanted to put something beetwen them, you add this to your css:
label>input[type=checkbox]:before {
}
label>input[type=checkbox]:checked:before {
}
I've adjusted it for you. It's not the easiest/cutest way to implement it, but at least works with your current HTML.
Here's the FIDDLE
I created checkboxes and radio buttons using Font Awesome. The ones I found online had something or the other missing. I needed ones that could be scaled and I didn't want any unclickable gap between the checkbox and its label.
Here are links to the repository and the demo
No JavaScript but small html manipulation like adding label with "for" attribute. so that when ever click on label checkbox click will trigger.
.form input[type="checkbox"]{
display:none;
}
.form input[type="checkbox"] + label.fa {
color: #88E2E2;
font-size: 25px;
width: 25px;
height: 25px;
cursor: pointer;
}
.form input[type="checkbox"]:checked +label.fa{
background: #fff;
}
.form input[type="checkbox"] + label.fa:before {
display:inline-block;
content: "\f096";
cursor:pointer;
}
.form input[type="checkbox"]:checked +label.fa:before{
content:"\f046";
position: relative;
left: 2px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<form class="form">
<input id="check_1" type="checkbox"/><label class="fa" for="check_1"></label>
<input id="check_2" type="checkbox"/><label class="fa" for="check_2"></label>
<input id="check_3" type="checkbox"/><label class="fa" for="check_3"></label>
</form>
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.
Assuming the following markup:
<fieldset>
<legend>Radio Buttons</legend>
<ol>
<li>
<input type="radio" id="x">
<label for="x"><!-- Insert multi-line markup here --></label>
</li>
<li>
<input type="radio" id="x">
<label for="x"><!-- Insert multi-line markup here --></label>
</li>
</ol>
</fieldset>
How do I style radio button labels so that they look like the following in most browsers (IE6+, FF, Safari, Chrome:
I believe this does it all. You didn't mention that it has to validate, however, so I used the inline-block (-moz-inline-box) display. One of my favorites, actually.
Here's a working copy
Tested in Safari 3, FireFox 3, and IE7.
<style type="text/css">
ol{
padding-left: 0;
margin-left:0;
}
ol>li {
list-style-type: none;
margin-bottom: .5em;
}
ol>li input[type=radio] {
display: -moz-inline-box;
display: inline-block;
vertical-align: middle;
}
ol>li label {
display: -moz-inline-box;
display: inline-block;
vertical-align: middle;
}
</style>
Using the following markup and css I was able to produce multi-line labels that do not wrap under the radio button:
<style type="text/css">
fieldset input, label {
float: left;
display: block;
}
fieldset li {
clear: both;
}
</style>
<fieldset>
<ol>
<li>
<input type="radio" id="x" />
<label for="x">
stuff<br/>
stuff1
</label>
</li>
<li>
<input type="radio" id="x" />
<label for="x">
stuff<br/>
stuff1
</label>
</li>
</ol>
</fieldset>
however I was unable to use:
fieldset label {
vertical-align: middle;
}
to center the label vertically on the radio button, even when applying a width (both suggestions in Dmitri Farkov's answer. My main purpose was to prevent wrapping under the radio button, so this solution will be fine for the time being.
Since I asked how to handle really long labels above, and I finally solved it myself. Here is the solution to my problem. Maybe it could help you to?
<style type="text/css">
#master_frame {
background: #BBB;
height: 300px;
width: 300px;
}
fieldset.radios {
border: none;
}
fieldset fields {
clear: both;
}
input {
float: left;
display: block;
}
label {
position: relative;
margin-left: 30px;
display: block;
}
</style>
<div id="master_frame">
<fieldset class='radios'>
<div class='field'>
<input type="radio" id="a" />
<label for="a">Short</label>
</div>
<div class='field'>
<input type="radio" id="b" />
<label for="b">
A really long and massive text that does not fit on one row!
</label>
</div>
</fieldset>
</div>
Make input and label both
float: left;
display: block;
Set width's for the label and input.
apply
clear: both;
vertical-align: middle;
to all the li's.
You should use white-space: normal; in label for multiline