Let's say I have some radio buttons with their labels looking like this:
<label for="my_radio_button_id">My Label</label>
<input type="radio" name="radio" id="my_radio_button_id" />
How do I center each radio button below its corresponding label and align it horizontally?
FIDDLE
.checkboxgroup {
display: inline-block;
text-align: center;
}
.checkboxgroup label {
display: block;
}
<div id="checkboxes">
<div class="checkboxgroup">
<label for="my_radio_button_id1">My Label1</label>
<input type="radio" name="radio" id="my_radio_button_id1" />
</div>
<div class="checkboxgroup">
<label for="my_radio_button_id2">My Label2</label>
<input type="radio" name="radio" id="my_radio_button_id2" />
</div>
<div class="checkboxgroup">
<label for="my_radio_button_id3">My Label3</label>
<input type="radio" name="radio" id="my_radio_button_id3" />
</div>
</div>
Would this work? http://jsfiddle.net/fFEwh/2/
JSFIDDLE
This alternative does not use div as wrappers, I use this to get a short DOM tree.
/* center radio below label */
.radioGroupBelow label {
display: inline-block;
text-align: center;
margin: 0 0.2em;
}
.radioGroupBelow label input[type="radio"] {
display: block;
margin: 0.5em auto;
}
<div class="radioGroupBelow">
Fruits:
<label for="fruit1">Orange
<input type="radio" name="fruits" id="fruit1">
</label>
<label for="fruit2">Apple
<input type="radio" name="fruits" id="fruit2">
</label>
<label for="fruit3">Grape
<input type="radio" name="fruits" id="fruit3">
</label>
<label for="fruit4">Lemon
<input type="radio" name="fruits" id="fruit4">
</label>
</div>
Related
I'm working on a challenge and would like to know how I can style a radio input element such that:
the actual radio feature itself is not present,
the element will be such that when selected, its background-color changes to a color of my choosing,
the element can't be deselected after being selected (just like a proper radio button).
I have searched and found this ModernCSS article which didn't provide what I was looking for. I applied what I understood from the article like so:
<label role="radio" class="radio">
<input type="radio" name="radio">
5%
</label>
<label role="radio" class="radio">
<input type="radio" name="radio">
10%
</label>
<label role="radio" class="radio">
<input type="radio" name="radio">
15%
</label>
<label role="radio" class="radio">
<input type="radio" name="radio">
25%
</label>
<label role="radio" class="radio">
<input type="radio" name="radio">
50%
</label>
<label role="textbox">
<input type="text" name="amount" value="40%">
</label>
input[type="radio"] {
display: grid;
place-content: center;
appearance: none;
margin: 10% 0 0;
width: 2rem;
height: 1rem;
align-items: center;
background-color: #fff;
}
input[type="radio"]:checked {
background-color: hsl(172, 67%, 45%);
}
.radio {
grid-template-columns: 1rem auto;
gap: 0.5rem;
background-color: hsl(183, 100%, 15%);
}
As with many other articles I tried, such as this article from Bryntum and this from W3Schools, they show you how to style the radio itself which I don't need, since I'm trying to get rid of it altogether.
I guess you don't actually want the radio buttons to be absent, but you want them not to be seen as you'll still want their clickable qualities.
You can achieve this by setting their opacity to 0.
What you also need is the label element to be influenced by whether its associated input is checked or not. This snippet alters the order so the label comes immediately after the input and the new color (when the radio button is checked) is put onto the label, not onto the radio button.
Note also the use of the 'for' attribute which says that label is associated with that input (via id).
This snippet groups each input/label pair in a div with class choice and groups the lot into a div with class choices to make formatting easier.
.choices {
display: flex;
gap: 10px;
}
input[type="radio"] {
opacity: 0;
width: 2rem;
height: 1em;
background-color: #fff;
position: absolute;
}
input[type="radio"]:checked+label {
background-color: hsl(172, 67%, 45%);
}
.radio {
background-color: hsl(183, 100%, 15%);
color: white;
}
<div class="choices">
<div class="choice">
<input type="radio" name="radio" id="five">
<label role="radio" class="radio" for="five">
5%
</label>
</div>
<div class="choice">
<input type="radio" name="radio" id="ten">
<label role="radio" class="radio" for="ten">
10%
</label>
</div>
<div class="choice">
<input type="radio" name="radio" id="fifteen">
<label role="radio" class="radio" for="fifteen">
15%
</label>
</div>
<div class="choice">
<input type="radio" name="radio" id="twentyfive">
<label role="radio" class="radio" for="twentyfive">
25%
</label>
</div>
<div class="choice">
<input type="radio" name="radio" id="fifty">
<label role="radio" class="radio" for="fifty">
50%
</label>
</div>
<div class="choice">
<input type="text" name="amount" value="40%" id="text">
<label role="textbox" for="text">
</label>
</div>
</div>
Obviously you will want to set the formatting as you want it, and I am not clear what you want to happen with the input of type text as you've given it a different name. I'll put up a comment in order to get clarification.
label{
position: relative;
}
input[type=radio]{
position:absolute;
visibility:hidden;
}
input[type=radio]:checked + div{
background: green;
}
<label role="radio" class="radio">
<input type="radio" name="radio">
<div>5%</div>
</label>
<label role="radio" class="radio">
<input type="radio" name="radio">
<div>10%</div>
</label>
<label role="radio" class="radio">
<input type="radio" name="radio">
<div>15%</div>
</label>
<label role="radio" class="radio">
<input type="radio" name="radio">
<div>20%</div>
</label>
<label role="radio" class="radio">
<input type="radio" name="radio">
<div>50%</div>
</label>
<label role="textbox">
<input type="text" name="amount" value="40%">
</label>
you can go ahead and clean it more and structure it the way you want this is how i do it or using javascript.
you cannot make a radio button deselectable by using only one radio-group. I used multiple radio-group to make a radio button deselectable once selected.
try this:
input[type="radio"] {
appearance: none;
width:100%;
height:100%;
position:absolute;
z-index:999;
}
label{
width:100%;
min-height:100%;
display:flex;
align-items:center;
justify-content:center;
}
input[type="radio"]:checked + label {
background-color: hsl(172, 67%, 45%);
}
div {
height:200px;
}
<div>
<input type="radio" name="radio1"/>
<label role="radio1" class="radio">5%</label>
</div>
<div>
<input type="radio" name="radio2">
<label role="radio2" class="radio">10%</label>
</div>
<div>
<input type="radio" name="radio3">
<label role="radio3" class="radio">15%</label>
</div>
<div>
<input type="radio" name="radio4">
<label role="radio4" class="radio">20%</label>
</div>
<div>
<input type="radio" name="radio5">
<label role="radio5" class="radio">25%</label>
</div>
<div>
<input type="radio" name="radio6">
<label role="radio6" class="radio">50%</label>
</div>
I want to make all my radio in #frequent and the checkbox in #player in a straight line like I did in the #gender, but without the need to give every label and input a separate div. How can I do it?
My codepen and a part of my code:
In #gender:
<div id="gender">
<div class="gm">
<label for="male"> Male </label>
<input type="radio" id="male" name="gender" class="rad" >
</div>
<div class="gf">
<label for="female"> Female </label>
<input type="radio" id="female" name="gender" class="rad" >
</div>
And for example,
<div id="frequent">
<legend> How Frequent Do You Listen To Music </legend>
<label for="aday">All day
<input type="radio" id="aday" name="frequent" class="rad">
</label>
<label for="eday">Every day
<input type="radio" id="eday" name="frequent" class="rad">
</label>
<label for="oday">Every other day
<input type="radio" id="oday" name="frequent" class="rad">
</label>
<label for="party">I'm a party person
<input type="radio" id="party" name="frequent" class="rad">
</label>
</div>
You have to give the following styles then it will be exactly like the gender
#frequent label {
width: 50%;
display: flex;
justify-content: space-between;
}
#player label {
display: flex;
justify-content: space-between;
width: 50%;
}
#player input[type="checkbox"] {
margin-right: 0;
}
#player input {
flex: none;
}
you can also check the codepen
Wrap the text in label in a span and then use the following css
HTML
<label for="saxophone"> <span>Saxophone </span>
<input type="checkbox" id="saxophone" class="chk">
</label>
CSS
label > span {
min-width: 150px;
display: inline-block;
}
I'm trying to center all my radio buttons vertically with its label, but vertical-align doesn't help:
input[type="radio"]{
vertical-align: center;
}
<p style="display:inline-block;margin:0 0;"> Option: </p>
<label>
<input type="radio" name="group1"> Label1
</label>
<label>
<input type="radio" name="group1"> Label2
</label>
<label>
<input type="radio" name="group1"> Label3
</label>
Correct is: vertical-align: middle;
You can use these CSS settings:
input[type="radio"] {
display: block;
margin: 0 auto 5px auto;
}
label {
text-align: center;
display: inline-block;
width: 80px;
}
<p style="display:inline-block;margin:0 0;"> Option: </p>
<label>
<input type="radio" name="group1"> Label1
</label>
<label>
<input type="radio" name="group1"> Label2
</label>
<label>
<input type="radio" name="group1"> Label3
</label>
And applied to your jsfiddle: https://jsfiddle.net/p5ts1rco/1/
[Solved]
I edit this example for checkboxes https://stackoverflow.com/a/494922/7767664 (changed to radio buttons):
.checkboxes label {
display: block;
float: left;
padding-right: 3px;
white-space: nowrap;
}
.checkboxes input {
vertical-align: middle;
}
.checkboxes label span {
vertical-align: middle;
font-size:29px;
}
<div class="checkboxes">
<label> <span>Option: </span></label>
<label><input type="radio" name="group1" id="x" /> <span>Label text x</span></label>
<label><input type="radio" name="group1" id="y" /> <span>Label text y</span></label>
<label><input type="radio" name="group1" id="z" /> <span>Label text z</span></label>
</div>
I have used display:flex to style a number of radio buttons so that they appear side by side, rather than in one long column. I thought by using margin:auto in combination with this, the child elements would appear grouped but in the center of the page horizontally. Clearly this isn't the case, so any help would be appreciated please.
Here is what I have currently:
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label {
background-color: red;
display: inline-block;
line-height: 4vw;
text-align: center;
width: 18vw;
}
label {
background-color: orange;
display: inline-block;
line-height: 4vw;
color: white;
text-align: center;
width: 18vw;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<section style="display:flex; margin:auto;">
<div>
<p>Amount:</p>
</br>
<input type="radio" name="Amount" id="Amount1" value="single" / checked>
<label for="Amount1">Amount 1</label>
</br>
</br>
<input type="radio" name="Amount" id="Amount2" value="multi" />
<label for="Amount2">Amount 2</label>
</div>
<span style="width:5vw;display:inline-block"></span>
<div>
<p>Term:</p>
</br>
<input type="radio" name="Term" id="Term1" value="0" / checked>
<label for="Term1">Term 1</label>
</br>
</br>
<input type="radio" name="Term" id="Term2" value="1" />
<label for="Term2">Term 2</label>
</div>
<span style="width:5vw;display:inline-block"></span>
<div>
<p>Phone:</p>
</br>
<input type="radio" name="Phone" id="Phone1" value="0" / checked>
<label for="Phone1">Phone 1</label>
</br>
</br>
<input type="radio" name="Phone" id="Phone2" value="1" />
<label for="Phone2">Phone 2</label>
</div>
</section>
I have used viewport width throughout the project, as I have further CSS styling to change element sizes based on media queries. So I need a solution that still keeps this styling if possible.
Using the following should help:
justify-content: center
On the display:flex class.
Source: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I am getting crazy right now since i try to style my radio buttons for hours now and i cant reach my goal (im completely new to the world of css).
What i want to do is simple:
I want three big radiobuttons underneath each other centered in my div with labels vertically aligned to the buttons. something similar to this:
I have the following html:
<div class="answers">
<label>
<input type="radio" name="answers" value="male" /> All
</label>
<label>
<input type="radio" name="answers" value="female" /> Name
</label>
<label>
<input type="radio" name="answers" value="male" /> Vendor No.
</label>
</div>
And the result is this:
I want much bigger buttons and much bigger text. i want the text to be to the right of the buttom with a little padding. i want all radio buttons to be centered. I tried many things but everything was just looking weird. Pls help me... i am beginning to hate css....
You can use this CSS:
.answers label {
display: block;
font-size: 20px;
line-height: 30px;
margin: 0 auto;
width: 150px;
}
.answers {
width: 100%;
}
.answers input[type="radio"] {
height: 30px;
line-height: 30px;
vertical-align: bottom;
width: 30px;
}
JSFiddle: http://jsfiddle.net/ghorg12110/uqyfbjsb/
The only reason to happen this is to have display: block somewhere in your css to radios:
input[type=radio] {
display: block;
}
<div class="answers">
<label>
<input type="radio" name="answers" value="male" />All
</label>
<label>
<input type="radio" name="answers" value="female" />Name
</label>
<label>
<input type="radio" name="answers" value="male" />Vendor No.
</label>
</div>
You can add display: block to second label using nth-child:
label:nth-child(2) {
display: block;
}
<div class="answers">
<label>
<input type="radio" name="answers" value="male" />All
</label>
<label>
<input type="radio" name="answers" value="female" />Name
</label>
<label>
<input type="radio" name="answers" value="male" />Vendor No.
</label>
</div>
References
nth-child
http://jsfiddle.net/6b888vp8/2/
Add display: block to the label in the answers div, and float left to the inputs. HTML has changed too
.answers label {
display: block
}
.answers input[type="radio"] {
float: left;
}
<div class="answers">
<input type="radio" name="answers" value="male" /><label>All</label>
<input type="radio" name="answers" value="female" /><label>Name</label>
<input type="radio" name="answers" value="male" /><label>Vendor No.</label>
</div>
This one worked for me:
input[type="radio"]{
width: 50px !important;
}
Try it out and check if it works for you as well.