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;
}
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'v got 3 id's - #gender (radio), #frequent (also radio), #player (checkbox)
I want to make my space between my inputs to my labels to be 16px (for example)
I want to make my #frequent and #player id's to go into two lines.
I'v tried to give to my #gender 20% width to the label and 80% to the input (and I'v played around it) and nothing.
And the #frequent act like a column all though I'v tried to give it flex-direction: row;
This is my Codepen and part of my code:
for the gender,
<div id="gender">
<label for="male"> Male </label>
<input type="radio" id="male" name="gender" />
<label for="female"> Female </label>
<input type="radio" id="female" name="gender" />
</div>
and
#gender{
display: flex;
flex-direction: row;
}
#gender label {
width: 20%;
}
#gender input[type="radio"]{
width: 80%;
}
For the frequent,
<div id="frequent">
<legend> How Frequent Do You Listen To Music </legend>
<label for="aday">All day </label>
<input type="radio" id="aday" name="frequent"/>
<label for="eday">Every day</label>
<input type="radio" id="eday" name="frequent"/>
<label for="oday">Every other day</label>
<input type="radio" id="oday" name="frequent"/>
<label for="party">I'm a party person</label>
<input type="radio" id="party" name="frequent"/>
</div>
And
#frequent {
display: flex;
}
#frequent legend {
margin-bottom: 24px;
}
#frequent label {
width: 20%;
}
#frequent input[type="radio"]{
width: 80%;
}
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 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.
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>