I am trying to get my gender button to align with my radio image buttons this is the codes have so far. It gives me the text above the button. Thank you in advance
<div class="genderalign">
<p>Choose:</p>
<input type="radio" name="option" value="1" id="choose-1" />
<label for="choose-1">
<img src="/images/femaleC.png" />
</label>
<input type="radio" name="option" value="2" id="choose-2" />
<label for="choose-2">
<img src="/images/maleC.png" />
</label>
</div>
I've corrected the misplaced </div> so your HTML is now like this.
Then just apply flexbox
.genderalign {
display: flex;
align-items: center;
}
<div>
<div class="genderalign">
<p>Choose:</p>
<input type="radio" name="option" value="1" id="choose-1" />
<label for="choose-1">
<img src="/images/femaleC.png"/>
</label>
<input type="radio" name="option" value="2" id="choose-2" />
<label for="choose-2">
<img src="/images/maleC.png" />
</label>
</div>
</div>
Related
I have this code with a 5 star rating(radio button) to be used in two different questions.
The problem is: the ratings of each question are working as one. I mean, I select something in the first question, but when I do a selection in the second question it changes the selection in the first one.
This problem happens when I add the CSS code. Without the CSS it works fine.
What is wrong in the CSS?
.estrelas input[type=radio] {
display: none;
}
.estrelas label i.fa:before {
content: '\f005';
color: #FC0;
font-size: 40px;
}
.estrelas input[type=radio]:checked~label i.fa:before {
color: #CCC;
}
.estrelas {
margin-left: 10px;
margin-top: 10px;
}
<div class="form-group has-feedback">
<div class="col-xs-12">
<label for="co_pergunta_avaliacao" class="control-label">ASPECTOS FORMAIS/GRAMATICAIS</label>
</div>
<div class="col-xs-8 estrelas" id="pergunta_1">
<label for="cm_star-1"><i class="fa"></i></label>
<input type="radio" id="cm_star-1" name="pergunta_1" value=1_1 />
<label for="cm_star-2"><i class="fa"></i></label>
<input type="radio" id="cm_star-2" name="pergunta_1" value=1_2 />
<label for="cm_star-3"><i class="fa"></i></label>
<input type="radio" id="cm_star-3" name="pergunta_1" value=1_3 />
<label for="cm_star-4"><i class="fa"></i></label>
<input type="radio" id="cm_star-4" name="pergunta_1" value=1_4 />
<label for="cm_star-5"><i class="fa"></i></label>
<input type="radio" id="cm_star-5" name="pergunta_1" value=1_5 />
</div>
</div>
<div class="form-group has-feedback">
<div class="col-xs-12">
<label for="co_pergunta_avaliacao" class="control-label">CONTEÚDO/ARGUMENTAÇÃO</label>
</div>
<div class="col-xs-8 estrelas" id="pergunta_2">
<label for="cm_star-1"><i class="fa"></i></label>
<input type="radio" id="cm_star-1" name="pergunta_2" value=2_1 />
<label for="cm_star-2"><i class="fa"></i></label>
<input type="radio" id="cm_star-2" name="pergunta_2" value=2_2 />
<label for="cm_star-3"><i class="fa"></i></label>
<input type="radio" id="cm_star-3" name="pergunta_2" value=2_3 />
<label for="cm_star-4"><i class="fa"></i></label>
<input type="radio" id="cm_star-4" name="pergunta_2" value=2_4 />
<label for="cm_star-5"><i class="fa"></i></label>
<input type="radio" id="cm_star-5" name="pergunta_2" value=2_5 />
</div>
</div>
Radio button IDs must be unique. Here, IDs cm_star-1 ... cm_star-5 are used for 2 radio buttons each, which causes the behavior.
I want the checkboxes to be parallel to each other and the text to be aligned the same.
This is what i have (i'm new to this):
<input type="checkbox" name=”liste1” value="1">This is Example1<br>
<input type="checkbox" name=”liste1” value="2">Example2<br>
<input type="checkbox" name=”liste1” value="3">Example123456<br>
<input type="checkbox" name=”liste1”` value="4">Option4<br>
This is how it looks like
When a parent element is allowed to display: flex, each child element will be aligned vertically when the align-item: center is declared
div {
display: flex;
gap: 3px;
align-items: center
}
<div>
<input type="checkbox" id="liste1" name="liste1" value="1">
<label for="liste1"> Option 1</label>
</div>
<div>
<input type="checkbox" id="liste2" name="liste2" value="2">
<label for="liste2"> Option 2</label>
</div>
<div>
<input type="checkbox" id="liste3" name="liste3" value="3">
<label for="liste3"> Option 3</label>
</div>
<div>
<input type="checkbox" id="liste4" name="liste4" value="4">
<label for="liste4"> Option 4</label>
</div>
To start with, we'll correct the original version of the code:
” is not a valid quote to use in HTML, you should use either " or '
If an HTML tag doesn't have a closing tag (e.g. <p>content</p>) then it is referred to as self-closing, and should have a slash before the closing angle bracket, like this: <input />
This gives us:
<input type="checkbox" name="liste1" value="1" />This is Example1<br />
<input type="checkbox" name="liste1" value="2" />Example2<br />
<input type="checkbox" name="liste1" value="3" />Example123456<br />
<input type="checkbox" name="liste1" value="4" />Option4<br />
This is enough to get it to look right, however generally if you want to show text next to a checkbox, you want it to be clickable and affect the checkbox. The simplest way to do this is to wrap the input and it's label text inside a <label> element, like so:
label {
display: block;
}
input,
span {
vertical-align: middle;
}
<label>
<input type="checkbox" name="liste1" value="1" />
<span>This is Example1</span>
</label>
<label>
<input type="checkbox" name="liste1" value="2" />
<span>Example2</span>
</label>
<label>
<input type="checkbox" name="liste1" value="3" />
<span>Example123456</span>
</label>
<label>
<input type="checkbox" name="liste1" value="4" />
<span>Option4</span>
</label>
(I also used a small CSS rule instead of the <br /> tag, as it's generally preferable to use CSS for layout)
your picture says column but your question says row. Which one do you want?
#container {
display: flex;
flex-direction:column;
gap: 13px;
align-items: center
}
#container2 {
display: flex;
margin-top:20vw;
gap: 83px;
justify-content:center;
}
<div id='container'>
<div>
<input type="checkbox" id="liste1" name="liste1" value="1">
<label for="liste1"> Option 1</label>
</div>
<div>
<input type="checkbox" id="liste2" name="liste2" value="2">
<label for="liste2"> Option 2 xxx</label>
</div>
<div>
<input type="checkbox" id="liste3" name="liste3" value="3">
<label for="liste3"> Option 3 xxx xxx</label>
</div>
<div>
<input type="checkbox" id="liste4" name="liste4" value="4">
<label for="liste4"> Option 4 xxx</label>
</div>
</div>
<div id='container2'>
<div>
<input type="checkbox" id="liste1" name="liste1" value="1">
<label for="liste1"> Option 1</label>
</div>
<div>
<input type="checkbox" id="liste2" name="liste2" value="2">
<label for="liste2"> Option 2</label>
</div>
<div>
<input type="checkbox" id="liste3" name="liste3" value="3">
<label for="liste3"> Option 3</label>
</div>
<div>
<input type="checkbox" id="liste4" name="liste4" value="4">
<label for="liste4"> Option 4</label>
</div>
</div>
So Im a complete beginner and Im stuck on some personal project. Im making forms and I want to have inputs from radio buttons all in the same line, but under the label. I know how to make all elements inline and I know that setting the block property should put them under label. But block element puts all of the inputs on its on line. What I want is all inputs to be on the same line, under lable. I can use tag in HTML, but I want to make it with CSS. Any tips?
<div class="radio" >
<label class="radio" for="age">Your age:</label>
<input type="radio" name="age">0-20
<input type="radio" name="age">20-40
<input type="radio" name="age">40-60
<input type="radio" name="age">60-80
<input type="radio" name="age">80-100
</div>
<div class="radio" >
<label class="radio" for="gender">Your gender</label>
<input type="radio" name="gender">Male
<input type="radio" name="gender">Female
</div>
just put a line break <br />
<div class="radio" >
<label class="radio" for="age">Your age:</label>
<br />
<input type="radio" name="age">0-20
<input type="radio" name="age">20-40
<input type="radio" name="age">40-60
<input type="radio" name="age">60-80
<input type="radio" name="age">80-100
</div>
<div class="radio" >
<label class="radio" for="gender">Your gender</label>
<br />
<input type="radio" name="gender">Male
<input type="radio" name="gender">Female
</div>
Set the label to display: flex; but make sure not to target the radio class or it will also effect the parent div and not work properly.
Instead of setting all of the radio buttons to display: block, setting just the label to display: block will get the effect you want. Block elements will start a new line (if needed) and force the next element to a new line as well. Since you want just the label to be on a new line by itself, setting it to display: block will do the trick.
label.radio {
display: block;
}
<div class="radio">
<label class="radio" for="age">Your age:</label>
<input type="radio" name="age">0-20
<input type="radio" name="age">20-40
<input type="radio" name="age">40-60
<input type="radio" name="age">60-80
<input type="radio" name="age">80-100
</div>
<div class="radio">
<label class="radio" for="gender">Your gender</label>
<input type="radio" name="gender">Male
<input type="radio" name="gender">Female
</div>
I have been trying to align the input radio type inline.. but still i can't able to make them inline.. it comes in next line.
This is the coding unit.
<tr>
<td>Display on Homepage</td>
<td>
<div style="display: inline;">
<label>
<input type="radio" class='icheck-me' name="show" value="Yes" data-skin="flat" data-color="orange" checked> Yes
</label>
<label>
<input type="radio" id="radio-inline" class='icheck-me' name="show" value="No" data-skin="flat" data-color="grey"> No
</label>
</div>
</tr>
Try this-
<label class='box'>
<input type="radio" class='icheck-me' name="show" value="Yes" data-skin="flat" data-color="orange" checked> Yes
</label>
<label class='box'>
<input type="radio" id="radio-inline" class='icheck-me' name="show" value="No" data-skin="flat" data-color="grey"> No
</label>
CSS:
.box{ display:inline-block; width: 50px;} .icheck-me{ display:inline-block; float:left;}
You should use the inline on the labels too
<div>
<label style="display: inline;">
<input type="radio" class='icheck-me' name="show" value="Yes" data-skin="flat" data-color="orange" checked> Yes
</label>
<label style="display: inline;">
<input type="radio" id="radio-inline" class='icheck-me' name="show" value="No" data-skin="flat" data-color="grey"> No
</label>
</div>
This is just an example, it's not recommended to add these properties in the style attribute - you should add it to a new class or add the display: inline; to the icheck-me class
You can use display:block to get the radio buttons underneath each other. Also, align the text to the top right of the cell by using: 'style="vertical-align: top;"'
So, your code would look like this:
<tr>
<td style="vertical-align: top;">Display on Homepage</td>
<td>
<div>
<label>
<input type="radio" class="icheck-me" name="show" value="Yes" data-skin="flat" data-color="orange" checked> Yes
</label>
<label>
<input type="radio" id="radio-inline" class="icheck-me" name="show" value="No" data-skin="flat" data-color="grey"> No
</label>
</div>
</td>
</tr>
And CSS:
.icheck-me{
display:block;
}
DEMO
I have this code and cannot get it to select the radio when I click on it's image.
I'm I missing something?
Here is the current code:
<label style="display: inline; " for="test1">
<img src="images/image1.jpg" />
<input checked="checked" class="select_control" id="select1" name="test1" type="radio" value="value1" />
</label>
<label style="display: inline; " for="test2">
<img src="images/image2.jpg" />
<input checked="checked" class="select_control" id="select2" name="test2" type="radio" value="value2" />
</label>
The for attribute in label should match input's id and not name. name is used for grouping radio buttons and checkboxes (when it's the same name their are in a group, so checking one will will uncheck the other).
<label for="test1">
<img src="image1.jpg" />
<input id="test1" name="test" type="radio" value="value1" />
</label>
<label for="test2">
<img src="image2.jpg" />
<input id="test2" name="test" type="radio" value="value2" />
</label>
Here's a working example of your code: http://jsfiddle.net/nXb5a/
the for attribute of the label should reference the id of the input it is for not the name
see:
http://jsfiddle.net/EtvLu/
the for attribute should be the id of the element it is referring to, and both radio buttons should have the same name (assuming you want them as one group):
<label style="display: inline; " for="select1">
<img src="images/image1.jpg" />
<input checked="checked" class="select_control" id="select1" name="test1" type="radio" value="value1" />
</label>
<label style="display: inline; " for="select2">
<img src="images/image2.jpg" />
<input checked="checked" class="select_control" id="select2" name="test1" type="radio" value="value2" />
</label>