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.
Related
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 would like to get these two lines to stay together. https://prnt.sc/j6c1ks
Desired result: https://prnt.sc/j6c5qb
The problem is that when I manage to get my desired result the first radio button stops working. How would I stop it from breaking?
.form-label {
display: flex;
margin-top: 15px;
}
.label-option {
padding: 20px;
}
<label class="form-label">
<input type="radio" name="authorisation" value="i-do-not"> Speedy fried chicken
<br>
</label>
<label class="label-option"> Would you like it spicy?
<input type="radio" name="option" value="yes"> Yes
<input type="radio" name="option" value="no"> No
</label>
Change display:flex to display:inline-flex:
.form-label {
display: inline-flex;
margin-top: 15px;
}
.label-option {
padding: 20px;
}
<label class="form-label">
<input type="radio" name="authorisation" value="i-do-not"> Speedy fried chicken <br>
</label>
<label class="label-option"> Would you like it spicy?
<input type="radio" name="option" value="yes"> Yes
<input type="radio" name="option" value="no"> No
</label>
.form-label {
display: inline-block;
margin-top: 15px;
}
.label-option {
padding: 20px;
}
<label class="form-label">
<input type="radio" name="authorisation" value="i-do-not"> Speedy fried chicken
</label>
<label class="label-option"> Would you like it spicy?
<input type="radio" name="option" value="yes"> Yes
<input type="radio" name="option" value="no"> No
</label>
The problem is causing by the CSS padding: 20px, after removing this, you won't need that <br /> anymore.
.form-label {
display: flex;
margin-top: 15px;
}
<label class="form-label">
<input type="radio" name="authorisation" value="i-do-not"> Speedy fried chicken
</label>
<label class="label-option"> Would you like it spicy?
<input type="radio" name="option" value="yes"> Yes
<input type="radio" name="option" value="no"> No
</label>
HTML auto maticllay remove spacing if you need to remove spacing keep all in inline elements like span b i or else change the styles of display values should be override with inline
I want to make block for radio
This is my code.
<label> Rating
<input type="radio">great
<input type="radio">wonderful
</label>
But it does not work correctly.
label{
display: block;
}
<p> Rating</p>
<label for="radio1"><input type="radio" id="radio1" name="radiogroup1">great</label>
<label for="radio2"><input type="radio" id="radio2" name="radiogroup1">wonderful</label>
<div style="display:flex; width: 120px;">
<p style="flex:1">Rating</p>
<div style="flex:1">
<input type="radio">Good<br>
<input type="radio">Great
</div>
</div>
Do you mean something like this? You could also use a table to get the same effect.
Only with html:
<label> Rating: </label>
<p>
<input type="radio" name="rate" id="great">
<label for="great">great</label>
</p>
<p>
<input type="radio" name="rate" id="wonderful">
<label for="wonderful">wonderful</label>
</p>
Try this simple solution to display as list.
label li {
list-style:none;
}
<label> Rating
<li><input type="radio" name="group1">great</li>
<li><input type="radio" name="group1">wonderful </li>
</label>
You might not have do use any css here, you can create the structure using block elements.
Here you are trying to align a inline element in a block so you can use p, div or any other block element.
/* outline focus */
label:focus, input:focus{
outline: dotted 2px red;
}
/* No CSS to align the below elements */
<label for="rating"> Rating</label>
<p><label for="great">great</label><input type="radio" name="rating" id="great"></p>
<p><label for="wonderful">wonderful</label><input type="radio" name="rating" id="wonderful"></p>
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/
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>