I wish to move my radiobuttons under each of the selections. Radiobutton "test1" under the first selection and radiobutton "test2" under the second selection. That is, the radiobuttons are below the selection, but next to each other.
How do I do that? I do not wish to use tables or br. I would like to use CSS; how should I style my CSS?
<form name="test">
<label style="float:left;">test</label>
<input style="display:block" />
<label style="float:left;">test</label>
<input style="display:block" />
<label style="float:left;">test</label>
<select>
<option>1</option>
<option>2</option>
</select>
<select>
<option>a</option>
<option>b</option>
</select>
<input type="radio" name="test" value="test1">
<input type="radio" name="test" value="test2">
</form>
If I add more than one radio box:
I tried using + (adjacent sibling selector) in CSS, but I think it is because the position is absolute. So the next "children" won't align horizontally. I think this is the easiest/"neat" way of doing it.
So I tried to position it relatively (the first radio box) and float:left. But it positions itself too high.
Here is each radio button underneath each select element using only CSS without changing your HTML.
form {
display: block;
position: relative;
padding-bottom: 30px;
}
input[type="radio"] {
display: inline-block;
position: absolute;
bottom: 0;
left: 30px;
}
input[type="radio"]:last-child {
left: 70px;
}
JSFiddle Demo: https://jsfiddle.net/3w16q179/1/
More than 2 radio buttons:
JSFiddle Demo: https://jsfiddle.net/3w16q179/6/
This will align the radio buttons below the select inputs, regardless of width of their widths.
input[type="radio"] {
display: block;
}
<form name="test">
<label style="float:left;">test</label>
<input style="display:block" />
<label style="float:left;">test</label>
<input style="display:block" />
<label style="float:left;">test</label>
<div style="float:left;">
<select>
<option>1</option>
<option>2</option>
</select>
<input type="radio">
</div>
<div style="float:left;">
<select>
<option>2</option>
<option>3</option>
</select>
<input type="radio">
</div>
</form>
AHA! I just figured it out what you're looking for... Each radio button is centered under the select. I got it.
<!doctype html>
<html>
<style type = "text/css">
form * {
box-sizing: border-box;
}
form {
background: White;
width: 420px;
padding: 8px;
border: 1px solid grey;
}
fieldset {
text-align: center;
border: 0;
padding: 0;
}
label {
width: 33.33%;
float: right;
padding: 6px;
}
legend {
display: block;
float: left;
width: 33.33%;
margin: 0;
}
</style>
<form name="test">
<fieldset>
<label>
<select>
<option>a</option>
<option>b</option>
</select>
</label>
<label>
<select>
<option>a longer ooption</option>
<option>b</option>
</select>
</label>
</fieldset>
<fieldset>
<label>
<input type="radio" name="radio">
</label>
<label>
<input type="radio" name="radio">
</label>
<legend>
Choose One:
</legend>
</fieldset>
</form>
</html>
jsFiddle: https://jsfiddle.net/3jbqjj0f/
You can use display: block or display: inherit;.
input[type="radio"] {
display: block;
}
JSFiddle
Though your question is not that clear, I think you can use class. Just add any class to the input you want to move.
For example:
HTML
<input type="radio" class="myinput" />
CSS
input.myinput {
display:block;
margin-top:20px; /* For top spacing */
}
I hope that helps!
Related
I'm new at this so please bear with me. I'm trying to align the text and their input fields - just like this example - by using the label class in the CSS file (please check below) but for some reason it is not working and I can't figure out what I'm doing wrong. Could someone please help me out?
Here's my code:
/* Set main division background color, color, width, padding, border-radius, box-alignment */
.mainD {
background-color: white;
color: black;
width: 500px;
padding: 20px;
border-radius: 25px;
box-align: center;
}
/* Set fieldset in the center with no border */
fieldset {
border: none;
text-align: center;
}
/* Aligns texts and their fields */
label {
display: inline-block;
text-align: right;
}
<div class="mainD">
<h1>Interest Calculator</h1>
<fieldset>
<!---Input box for the amount--->
<label for="principal">Amount
<input type="number" id="principal"></label>
<br><br>
<!---Slider for the interest rate--->
<label for="rate" onchange="updateRate()">Interest Rate
<input type="range" id="rate" min="1" max="10" step="0.25" value="5.25">
<span id="rate_val">5.25</span>%</label>
<br><br>
<!---Dropdown box for the years--->
<label> No. of Years
<select id="years">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option></select></label> (additional code..)
</fieldset>
</div>
You can make use of flexbox to align the items vertically and horizontally. Then use justify-content to space them evenly as well to achieve the effect you want in the picture. See the snippet below:
/* Set main division background color, color, width, padding, border-radius, box-alignment */
.mainD {
background-color: white;
color: black;
width: 500px;
padding: 20px;
border-radius: 25px;
box-align: center;
}
/* Set fieldset in the center with no border */
fieldset {
border: none;
text-align: center;
}
/* Aligns texts and their fields */
label {
display: flex;
align-items: center;
justify-content: space-between;
}
.input {
display: flex;
width: 300px;
justify-content: flex-start;
align-items: center;
}
<div class="mainD">
<h1>Interest Calculator</h1>
<fieldset>
<!---Input box for the amount--->
<label for="principal">Amount
<div class="input"><input type="number" id="principal"></div>
</label>
<br><br>
<!---Slider for the interest rate--->
<label for="rate" onchange="updateRate()">
Interest Rate
<div class="input">
<input type="range" id="rate" min="1" max="10" step="0.25" value="5.25">
<span id="rate_val">5.25</span>%
</div>
</label>
<br><br>
<!---Dropdown box for the years--->
<label> No. of Years
<div class="input">
<select id="years">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</label>
</fieldset>
</div>
i center everything just to prove it actually center i added border feel free to remove it after
/* Set main division background color, color, width, padding, border-radius, box-alignment */
.mainD {
background-color: white;
color: black;
width: 500px;
padding: 20px;
border-radius: 25px;
box-align: center;
}
/* Set fieldset in the center with no border */
fieldset, h1 {
border: 2px solid #ff8197;
text-align: left;
margin: auto auto auto auto;
width: 60%;
}
/* Aligns texts and their fields */
label {
display: inline-block;
text-align: right;
}
<div class="mainD">
<h1>Interest Calculator</h1>
<fieldset>
<!---Input box for the amount--->
<label for="principal">Amount
<input type="number" id="principal"></label>
<br><br>
<!---Slider for the interest rate--->
<label for="rate" onchange="updateRate()">Interest Rate
<input type="range" id="rate" min="1" max="10" step="0.25" value="5.25">
<span id="rate_val">5.25</span>%</label>
<br><br>
<!---Dropdown box for the years--->
<label> No. of Years
<select id="years">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option></select></label> (additional code..)
</fieldset>
</div>
My question may be stupid but please I need an explanation. I found both html and CSS code to implement ON and OFF switcher but I really don't understand how the label animate is possible without javaScript using a click event.
can someone explain to me the trick in this code.
I have never seen this before
HTML:
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
CSS:
<style>
.onoffswitch {
position: relative; width: 109px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
height: 30px; padding: 0; line-height: 16px;
border: 2px solid #999999; border-radius: 3px;
background-color: #EEEEEE;
transition: background-color 0.3s ease-in;
}
.onoffswitch-label:before {
content: "OFF";
display: block; width: 16px; margin: 0px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 91px;
border: 2px solid #999999; border-radius: 5px;
padding:5px;
width:30px;
text-align:center;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label {
background-color: #00CED1;
}
.onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before {
border-color: #00CED1;
}
.onoffswitch-checkbox:checked + .onoffswitch-label:before {
right: 0px;
content: "ON";
padding:5px;
width:30px;
text-align:center;
}
</style>
Thank you.
When a label element is clicked, it activates its labelled element. In this case the labelled element is a checkbox.
This causes the checkbox to toggle its checked property (not attribute*).
The :checked pseudo-selector will match input[type="checkbox"] or input[type="radio"] elements that have their checked property in the true state.
The change in the :checked status allows the new CSS properties to be applied to the label because the entire selector chain subsequently matches (or no longer matches, depending on whether the checkbox is now checked or unchecked).
The CSS transition rule then animates the changed properties from one state to the other.
Here's a simple demo of a form that can be used to test the functionality of labels on various different field types. Note that the submit button won't work due to the form being in a sandboxed <iframe>.
<form action="http://example.com" target="_blank" method="get">
<p>
<label for="text">text</label>
<input type="text" name="text" id="text">
</p>
<p>
<label for="select">select</label>
<select name="select" id="select">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</p>
<p>
<label for="textarea">textarea</label>
<textarea name="textarea" id="textarea" cols="30" rows="10"></textarea>
</p>
<p>
<label for="checkbox">checkbox</label>
<input type="checkbox" name="checkbox" id="checkbox" value="checked">
</p>
<fieldset>
<legend>radio buttons</legend>
<p>
<label for="radio-1">radio 1</label>
<input type="radio" name="radio" id="radio-1" value="1">
</p>
<p>
<label for="radio-2">radio 2</label>
<input type="radio" name="radio" id="radio-2" value="2">
</p>
</fieldset>
<p>
<label for="reset">reset</label>
<input type="reset" id="reset" value="Reset">
</p>
<p>
<label for="button">button</label>
<button id="button" type="submit">Submit</button>
</p>
</form>
* so why is it important that the property is changed but not the attribute? When you use a reset button (input[type="reset"], or button[type="reset"]), the form will be reset to whatever the values of the HTML attributes (or innerHTML for <textarea>) are for each field. You can test this by using JavaScript to modify the value attribute of a text field and then resetting the form to see that no change happens.
By default only one selected or the default option is displayed in the select box however I want that all the select option to be displayed on the same line and among them the selected option must be highlighted.
Following is my code
.selecttodiv{
display: inline-block;
height: 3em;
-webkit-appearance: none;
-moz-appearance: none;
}
.selecttodiv option{
display: inline-block;
width: 2.5em;
height: 2.5em;
}
<select class="selecttodiv">
<option>I</option>
<option>II</option>
<option>III</option>
<option>IV</option>
<option>V</option>
<option>VI</option>
</select>
following is the link to jsfiddle: https://jsfiddle.net/6yg4yhyy/
I am able to display all option on the single line but not when selected.
Thanks for any help.
You can try using size attribute on select and floating option.
On Chrome and FF it was displayed properly. IE (11) doesn't work.
JSFiddle
Maybe it's better to use some select plugin where you can style it as you want..
Don't style default form elements. It will cause more issues than you think. Better use some extension that provides stylable html wrapper.
E.g. select2, chosen
$(document).ready(function() {
$('.selecttodiv').select2({
width: '190px'
});
})
.select2-results li {
display: inline-block !important;
width: 30px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.js"></script>
<select class="selecttodiv" multiple="multiple">
<option>I</option>
<option>II</option>
<option>III</option>
<option>IV</option>
<option>V</option>
<option>VI</option>
</select>
Update
Also it may be checkboxes:
.check {
display: inline-block;
}
span {
width: 20px;
height: 20px;
display: block;
color: black;
font-weight: bold;
cursor: pointer;
text-align: center;
}
input {
display: none;
}
input:checked + span {
background-color: blue;
color: white;
}
<label class="check">
<input type="checkbox" />
<span>I</span>
</label>
<label class="check">
<input type="checkbox" />
<span>II</span>
</label>
<label class="check">
<input type="checkbox" />
<span>III</span>
</label>
<label class="check">
<input type="checkbox" />
<span>IV</span>
</label>
<label class="check">
<input type="checkbox" />
<span>V</span>
</label>
<label class="check">
<input type="checkbox" />
<span>VI</span>
</label>
I've seen some tricks to change the background color (or other css attributes) on a group of radio buttons. Here is some html
<div class="myclass col-xs-3">
<input type="radio" name="mygroup" value="one" data-bind="checked: SelectedAttributeValueId" />
</div>
<div class="myclass col-xs-3">
<input type="radio" name="mygroup" value="two" data-bind="checked: SelectedAttributeValueId" />
</div>
<div class="myclass col-xs-3">
<input type="radio" name="mygroup" value="three" data-bind="checked: SelectedAttributeValueId" />
</div>
I've tried things like:
.myclass input[type="radio"]:checked{
background-color:#f2f2f2;
}
and
.myclass :checked{
background-color:#f2f2f2;
}
here is a fiddle link. I am using knockout, so maybe this is the tool I should use to style the <div> elements?
All input is appreciated, I would prefer not to use jquery or javscript here (although knockout is okay)
It is not possible to style the radio buttons circle.
However, you can use pseudo-elements (in this case :before) to render a box around the radio button, then style it in CSS.
input[type="radio"] {
display: inline-block;
position: relative;
width: 25%;
margin: 0;
}
input[type="radio"]:before {
content: '';
position: absolute;
z-index: -1;
top: -.5em;
right: 0;
bottom: -.5em;
left: 0;
border: 1px solid black;
background-color: #0073ae;
}
input[type="radio"]:checked:before {
background-color: #f2f2f2;
}
<input type="radio" name="mygroup" value="one" /><input
type="radio" name="mygroup" value="two" /><input
type="radio" name="mygroup" value="three"/>
Here's a solution via jquery.
$('[type=radio]').click(function(){
if($(this).val() == "one") {
$('.myclass').css("background-color", "yellow");
}
//...two...three
});
I have a basic css question. I'm trying to add css to my form, the code is below:
<div id="content">
<form id="form1" method="post" action="">
<p>
<label for="name" class="title">Your name:</label>
<input name="name" type="text" class="widebox" id="name">
</p>
<p>
Colour: <select name="colour_pref" size "1">
<option value="1">Pink</option>
<option value="2">Blue</option>
<option value="3">White</option></select>
</p>
<p class="submit">
<input type="submit" name="add" value="add_colour" id="add">
</p>
</form>
</div>
and this is the css:
#content p {
border-bottom: 1px solid #efefef;
margin: 10px;
padding-bottom: 10px;
width: 260px;}
.title {
float: left;
width: 100px;
text-align: right;
padding-right: 10px;}
.submit {
text-align: right;}
The problem is the select element is not aligned with the name field, I tried to add class="title" to it but it made it even messier.
Would really appreciate if you could help me align this select element VERTICALLY with the text field. thanks
Something like this DEMO http://jsfiddle.net/kevinPHPkevin/XzHG2/1/
.submit input {
margin-left:110px;
}
Just add display inline to your pararaph:
p {
display: inline;
}
Demo