I have radio button input with label, however I cannot align them horizontally, it just appeared one by one vertically, how can I make it align one by one horizontally.
<div class="cc-selector-2" align="right">
{{range $index,$url := .Avatars}}
<label for="pic1">
<input type="radio" name="avatar" id={{$url}} value={{$url}} />
<img src={{$url}} alt="" height="40" width="40"/>
</label>
{{end}}
</div>
<style>
.cc-selector-2 input{
position:absolute;
z-index:999;
}
label {
display: block;
text-align: center;
margin-bottom:0px;
font-size: .85em;
background-color:buttonface;
}
</style>
Just play with display: inline-block ;)
cc-selector-2{
text-align: center;
}
label {
display: inline-block;
margin:auto;
font-size: .85em;
background-color:buttonface;
}
input {
margin: 0;
}
<div class="cc-selector-2" align="right">
<label for="pic1">
<input type="radio" name="avatar" id={{$url}} value={{$url}} />
<img src={{$url}} alt="" height="40" width="40"/>
</label>
<label for="pic1">
<input type="radio" name="avatar" id={{$url}} value={{$url}} />
<img src={{$url}} alt="" height="40" width="40"/>
</label>
</div>
Related
I am trying to build a interactive email content block that would show or hide content based on the selection. It worked before I tried to customize the label. It stopped working after I wrapped the input and label inside a div. I think it could be throwing my selectors off but I am not sure how remedy the problem.
.custom-radios input[type="radio"] + label span img {
opacity: 0;
transition: all 0.3s ease;
}
.custom-radios input[type="radio"]#red + label span {
background-color: red;
}
.custom-radios input[type="radio"]#blue + label span {
background-color: blue;
}
.custom-radios input[type="radio"]#green + label span {
background-color: green;
}
.custom-radios input[type="radio"]#orange + label span {
background-color: orange;
}
.custom-radios input[type="radio"]:checked + label span img {
opacity: 1;
}
#red{
display: none
}
#blue{
display: none
}
#green{
display: none
}
#orange{
display: none
}
input[type="red"]:checked ~ #red {
display: block
}
input[value="blue"]:checked ~ #blue {
display: block;
}
input[value="green"]:checked ~ #green {
display: block;
}
input[value="orange"]:checked ~ #orange {
display: block;
}
<div class="custom-radios">
<div>
<input type="radio" id="red" name="color" value="red">
<label for="red">
<span>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon" />
</span>
</label>
</div>
<div>
<input type="radio" id="blue" name="color" value="blue">
<label for="blue">
<span>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon" />
</span>
</label>
</div>
<div>
<input type="radio" id="green" name="color" value="green">
<label for="green">
<span>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon" />
</span>
</label>
</div>
<div>
<input type="radio" id="orange" name="color" value="orange">
<label for="orange">
<span>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon" />
</span>
</label>
</div>
<div class="spacer" style="line-height:26px;height:26px;mso-line-height-rule:exactly;"> </div>
<p style="margin:0;" id="red">
<img src="https://via.placeholder.com/580x200/FF0000/FFFFFF" width="580" alt="" style="width:100%;height:auto;max-width:580px;" />
</p>
<p style="margin:0;" id="blue">
<img src="https://via.placeholder.com/580x200/0000FF/FFFFFF" width="580" alt="" style="width:100%;height:auto;max-width:580px;" />
</p>
<p style="margin:0;" id="green">
<img src="https://via.placeholder.com/580x200/00FF00/FFFFFF" width="580" alt="" style="width:100%;height:auto;max-width:580px;" />
</p>
<p style="margin:0;" id="orange">
<img src="https://via.placeholder.com/580x200/FFA500/FFFFFF" width="580" alt="" style="width:100%;height:auto;max-width:580px;" />
</p>
<div class="spacer" style="line-height:26px;height:26px;mso-line-height-rule:exactly;"> </div>
</div>
I think selectors may be a weak point for you, again, I encourage you to check the CSS Selectors Reference from w3school.
Anyways, I made a simplified version, as similar as I could to you current structure, so you can see it working.
.hidden_input {
display: none;
}
#red_input+label>span {
background-color: red;
}
#blue_input+label>span {
background-color: blue;
}
label>span>img {
opacity: 0;
transition: all 0.3s ease;
}
.hidden_input:checked+label>span>img {
opacity: 1;
}
#red_content,
#blue_content {
display: none;
}
#red_input:checked~#red_content,
#blue_input:checked~#blue_content {
display: block;
}
<div class="custom-radios">
<input type="radio" id="red_input" class="hidden_input" name="color" value="red">
<label for="red_input">
<span>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg"/>
</span>
</label>
<input type="radio" id="blue_input" class="hidden_input" name="color" value="blue">
<label for="blue_input">
<span>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg"/>
</span>
</label>
<div class="spacer" style="line-height:26px;height:26px;mso-line-height-rule:exactly;"> </div>
<p style="margin:0;" id="red_content">
<img src="https://via.placeholder.com/580x200/FF0000/FFFFFF" width="580" style="width:100%;height:auto;max-width:580px;" />
</p>
<p style="margin:0;" id="blue_content">
<img src="https://via.placeholder.com/580x200/0000FF/FFFFFF" width="580" style="width:100%;height:auto;max-width:580px;" />
</p>
</div>
You can also play and place elements wherever you want in your HTML code, and then set their position with grid (it's just another option).
I am trying to place some radio buttons over an image at an exact location. I have placed both in a Div but I am not sure what to do next. Here is where I want the radio buttons to be placed (red circles):
Here is my code so far:
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
body {
background-color: #979797
}
<div class="general">
<img src="https://via.placeholder.com/300" class="center">
<form action="">
<input type="radio" name="answer 1" value="apple">
<input type="radio" name="answer 2" value="chicken">
<input type="radio" name="answer 3" value="carrot">
</form>
</div>
Thank you so much in advance!
I would put the radio buttons in one div each and then give the div a background. Like this:
<html>
<head>
<style>
.general{}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.radio-size {
height: 100px;
width: 100px;
}
.bg-apple {
background-image:url('https://images.unsplash.com/photo-1513677785800-9df79ae4b10b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
background-size: cover;
}
.bg-chicken {
background-image:url('https://images.unsplash.com/photo-1426869981800-95ebf51ce900?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
background-size: cover;
}
.bg-carrot {
background-image:url('https://images.unsplash.com/photo-1445282768818-728615cc910a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
background-size: cover;
}
</style>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body bgcolor="#979797">
<div class="general">
<img src="https://images.unsplash.com/photo-1518796745738-41048802f99a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" class="center" style="width:20%;" >
<form action="" style="background-img:url("")">
<div class="radio-size bg-apple">
<input type="radio" name="answer 1" value="apple">
</div>
<div class="radio-size bg-chicken">
<input type="radio" name="answer 1" value="chicken"> <br>
</div>
<div class="radio-size bg-carrot">
<input type="radio" name="answer 1" value="carrot">
</div>
</form>
</div>
</body>
</html>
note: The radio-buttons are all supposed to have the same "name" atribute, so that you can only choose one of them. If you want to be able to select multiple options, you should use checkbox instead.
Even though you say you want them over your image, in the picture you shared the radio buttons appear to be on the right side of the image. So i am a bit confused about what you actually want.
But i made a simple example below. You can position them how you like or comment below if you want my help.
P.S. as i said in my comment : The <body> bgcolor attribute is not supported in HTML5. Use CSS instead.
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
body {
background-color: #979797
}
form {
position:absolute;
right: 25%;
top: 50%;
transform:translateY(-50%) translateX(100%);
display: flex;
flex-direction: column;
}
.general {
position: relative;
}
<div class="general">
<img src="http://via.placeholder.com/640x360" class="center">
<form action="">
<input type="radio" name="answer 1" value="apple">
<input type="radio" name="answer 2" value="chicken">
<input type="radio" name="answer 3" value="carrot">
</form>
</div>
You can use the following solution using flexbox:
body {
background:#979797;
}
.question {
display:flex;
flex-direction:row;
flex-wrap:nowrap;
}
.answers {
display:flex;
flex-direction:column;
}
label.answer {
position:relative;
height:100px;
}
label.answer input[type="radio"] {
top:0;
left:0;
position:absolute;
}
<form action="">
<h2>Question 1:</h2>
<div class="question">
<img src="https://picsum.photos/300">
<div class="answers">
<label class="answer">
<img src="https://picsum.photos/100">
<input type="radio" name="answer1" value="apple">
</label>
<label class="answer">
<img src="https://picsum.photos/100">
<input type="radio" name="answer1" value="chicken">
</label>
<label class="answer">
<img src="https://picsum.photos/100">
<input type="radio" name="answer1" value="carrot">
</label>
</div>
</div>
<h2>Question 2:</h2>
<div class="question">
<img src="https://picsum.photos/300">
<div class="answers">
<label class="answer">
<img src="https://picsum.photos/100">
<input type="radio" name="answer2" value="apple">
</label>
<label class="answer">
<img src="https://picsum.photos/100">
<input type="radio" name="answer2" value="chicken">
</label>
<label class="answer">
<img src="https://picsum.photos/100">
<input type="radio" name="answer2" value="carrot">
</label>
</div>
</div>
</form>
I think you should try the following type of code for the above query. I have changed you HTML structure and have changed your current CSS completely:
.general{
width: fit-content;
}
.img{
display: flex;
align-items: end;
}
img{
border: 1px solid black;
}
body {
background-color: #979797
}
.options{
display: flex;
flex-direction: column;
}
.radio{
position: relative;
height: 50px;
}
input[type="radio"]{
position: absolute;
top: calc(50% - 4px);
right: 0;
margin: 0;
}
<div class="general">
<form action="">
<div class="img">
<img src="https://via.placeholder.com/150" class="center">
<div class="options" class="center">
<div class="radio">
<img src="https://via.placeholder.com/50">
<input type="radio" name="answer1" value="apple">
</div>
<div class="radio">
<img src="https://via.placeholder.com/50">
<input type="radio" name="answer1" value="chicken">
</div>
<div class="radio">
<img src="https://via.placeholder.com/50">
<input type="radio" name="answer1" value="carrot">
</div>
</div>
</div>
</form>
</div>
Remember that if the questions only have a single answer then, the name of the radio box should be same and the value should be different. Otherwise, all the radio buttons will get selected simultaneously and cannot be unselected.
I hope this code is helpful.
Thanks.
How can I align a radiobuttonlist horizontally? This one is to capture a gender value , male/female. I want to keep the name input css the same. This is the html:
<label for="temp">Gender</label>
<label for="one">Male</label>
<input type="radio" id="one" name="first_item" value="1" />
<label for="two">Female</label>
<input type="radio" id="one" name="first_item" value="2" />
The css:
.grid-container {
display: grid;
grid-column-gap: 5px;
grid-template-columns: auto auto;
background-color: #2196f3;
padding: 10px;
}
.left-griditem {
}
input,
label {
display: block;
}
Here is a codepen. Currently the buttons are in a vertical position.
If you want only the radio buttons, add this style:
#genderArea input, #genderArea label{
display: inline;
}
and use this HTML:
<div class="grid-container">
<div class="left-griditem">
<label for="name">Name</label>
<input id="name" type="text" name="name">
<label for="temp">Gender</label>
<span id="genderArea">
<label for="one">Male</label>
<input type="radio" id="one" name="first_item" value="1" />
<br>
<label for="two">Female</label>
<input type="radio" id="one" name="first_item" value="2" />
</span>
</div>
<div class="right-griditem">2</div>
</div>
You have to wrap particular row which you want to make under a div/ a tag.
.grid-container {
display: grid;
grid-column-gap: 5px;
grid-template-columns: auto auto;
background-color: #2196f3;
padding: 10px;
}
.left-griditem {}
input,
label {
display: inline-block;
}
div.item>label:first-child {
width: 70px;
font-weight: bold;
}
div.item:first-child>input,
div.item:first-child>label {
display: block
}
body {
background: hsl(221, 64%, 24%);
color: hsl(235, 9%, 39%);
font-family: "Open Sans", sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
margin: 2rem 1rem 1rem 1rem;
}
div {
background: #fff;
padding: 1vw 2vw;
}
<div class="grid-container">
<div class="left-griditem">
<div class="item">
<label for="name">Name</label>
<input id="name" type="text" name="name">
</div>
<div class="item">
<label for="temp">Gender</label>
<label for="one">Male</label>
<input type="radio" id="one" name="first_item" value="1" />
<label for="two">Female</label>
<input type="radio" id="two" name="first_item" value="2" />
</div>
</div>
<div class="right-griditem">2</div>
</div>
Try this simple code using table, tr and td tags
<table>
<tr>
<td>
<label for="one">Male</label>
</td>
<td>
<input type="radio" id="one" name="first_item" value="1" />
</td>
<td style="widht:20px;"></td>
<td>
<label for="two">Female</label>
</td>
<td>
<input type="radio" id="one" name="first_item" value="2" />
</td>
</tr>
</table>
This approach gives you the flexibility to put controls, the way you want
Change this:
input,
label {
display: block;
}
To this:
input,
label {
display: inline;
}
I simply want to vertically center an input field inside its surrounding DIV, but at the same time all input fields on the page should be horizontally aligned with each other (should have the same left value, if you will).
Here's an example page of the problem:
.wrapper {
border: 1px solid #000;
border-radius: 10px;
margin: 10px;
padding: 10px;
line-height: 40px;
}
.inputClass {
position: absolute;
left: 25%;
/* top: 50%; transform: translate(0, -50%); */
/* not working as I need */
vertical-align: middle;
}
<div class="wrapper">
<div>
<div>
Some text
<input type="text" class="inputClass" />
</div>
<div>
Some more text
<input type="text" class="inputClass" />
</div>
</div>
</div>
Desired result (blue rim by Firebug):
You can group inputs+labels in fieldsets and then use the labels for moving the inputs towards the center,
try this:
.wrapper {
border: 1px solid #000;
border-radius: 10px;
margin: 10px;
padding: 10px;
line-height: 40px;
}
fieldset {
border: 0;
/*resets UA*/
}
/*can use label to move inputs right*/
label {
width:40%;
display:inline-block;
padding-right :15px;
text-align:right
}
<div class="wrapper">
<div>
<fieldset>
<label for='one'>Some text</label>
<input id='one' type="text" class="inputClass" />
</fieldset>
<fieldset>
<label for='two'>Some more text</label>
<input id='two' type="text" class="inputClass" />
</fieldset>
</div>
</div>
Put the text in a label (this is good practice anyway) and use inline block to position the elements beside each other. You can then give the label a width as required:
.wrapper {
border: 1px solid #000;
border-radius: 10px;
margin: 10px;
padding: 10px;
line-height: 40px;
}
.wrapper label {
display:inline-block;
width:25%;
vertical-align:middle;
}
.wrapper input {
display:inline-block;
vertical-align:middle;
}
<div class="wrapper">
<div>
<div>
<label for="field1">Some text</label>
<input id="field1" type="text" class="inputClass" />
</div>
<div>
<label for="field2">Some more text</label>
<input id="field2" type="text" class="inputClass" />
</div>
</div>
</div>
An excellent way to do this (in my opinion) would be using the table tag in HTML to organise the input fields and the labels. I would then use the "valign" property and set it to "TOP" e.g.
<table>
<tr>
<td valign="TOP">
Some text
</td>
<td valign="TOP">
<input type="text" class="inputClass" />
</td>
</tr>
<tr>
<td valign="TOP">
Some more text
</td>
<td valign="TOP">
<input type="text" class="inputClass" />
</td>
</tr>
</table>
The valign="TOP" assigned to the TD will make it be at the top of the cell in the table. This will ensure that they will be vertically and horizontally aligned with each other.
Another answer without using the table tag:
<style>
li {
width: 120px;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div>
<ul class="list-inline">
<li>Some text</li>
<li>
<input type="text">
</li>
</ul>
<ul class="list-inline">
<li>Some more text</li>
<li>
<input type="text">
</li>
</ul>
</div>
This would be used using BootStrap in order to list it in line.
A possible solution would be to put all the form labels in a div with class "col-left" & the input fields in a div with class "col-right". Both these are vertically middle aligned (vertical-align: middle) & the left column holding the labels have an equal width setting.
Please find below the complete solution:
.wrapper {
border: 1px solid #000;
border-radius: 10px;
margin: 10px;
padding: 10px;
line-height: 40px;
}
.col-left, .col-right {
vertical-align: middle;
display:inline-block;
}
.col-left {
width: 20%;
}
<div class="wrapper">
<div>
<div class="col-left">Some text</div>
<div class="col-right">
<input type="text" class="inputClass" />
</div>
</div>
<div>
<div class="col-left">Some more text</div>
<div class="col-right">
<input type="text" class="inputClass" />
</div>
</div>
</div>
How can I get the dates in the center of the main div.
JSFiddle
<style>
.div_table{
display:table;
width:100%;
}
.div_table_row{
display:table-row;
width:auto;
clear:both;
}
.div_table_col{
display:table-column;
float:left;/*fix for buggy browsers*/
}
label
{
width: 10em;
text-align: left;
margin-right: 0.5em;
display: block;
}
input
{
color: #781351;
background: #fee3ad;
border: 1px solid #781351
}
</style>
<div class="div_table">
<div class="div_table_row">
<img src="./images/logo_transparent.png" width="192" height="69" alt="Logo" />
</div>
<div class="div_table_row">
<?php include_once("./include/menu.php"); ?>
</div>
<div class="div_table_row">
<div style="text-align:center">
<label>From Date:<br /><input type="text" class="date" /></label>
<label>To Date:<br /><input type="text" class="date" /></label>
</div>
</div>
<div class="footer div_table_row">All Rights Reserved</div>
</div>
Whould you like to center the labels or the input textfields?
If labels do this:
<label><span>From Date:</span><br /><input type="text" class="date" /></label>
<label><span>To Date:</span><br /><input type="text" class="date" /></label>
Put the text in the label into a span.
in CSS:
label span {
position: absolute;
left: 50%;
}
Add position: relative; to .div_table_row.