I want to display my radio buttons as so that i can give style sheet and make div clickable.
here are my radio buttons.
and I want to show them like this.
div as radio
This is what I have tried but did not work.
HTML
<div class="radio-toolbar">
<table>
<tr>
<td><input type="radio" id="radioone" name="product" value="first">
<label for="radioone">50</label></td>
<td><input type="radio" id="radiotwo" name="product" value="second">
<label for="radiotwo">100</label></td>
<td><input type="radio" id="radiothree" name="product" value="third">
<label for="radiothree">500</label></td>
</div>
CSS
.radio-toolbar input[type='radio']:focus + label {
border: 2px thin blue;
}
.radio-toolbar input[type='radio']:checked + label {
background-color: #86b1f7;
border-color: #4c4;
color: white;
}
So how can I achive this
Small help will be appreciated.
Thanks in advance :)
I had do this before.and I have the code preperd.I hope It will be useful for you.
.switch-field {
display: flex;
overflow: hidden;
direction: ltr;
float: right;
text-align:right;
}
.switch-field input {
position: absolute !important;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
border: 0;
overflow: hidden;
}
.switch-field label {
/*width: 33.33%;*/
background-color: transparent;
color: #666666;
font-size: 14px;
line-height: 1;
text-align: center;
padding: 10px 12px;
margin-left: 0px;
/*margin-right: -1px;*/
border: 1px solid #ddd;
transition: all 0.1s ease-in-out;
}
.switch-field label:hover {
cursor: pointer;
}
.switch-field input:checked + label {
background-color: #F4F5F9;
box-shadow: none;
border-color: #3E7DE7;
color: #3E7DE7;
}
.switch-field label:first-of-type {
border-radius: 2px 0px 0px 2px;
}
.switch-field label:last-of-type {
border-radius: 0px 2px 2px 0px;
}
<div class="switch-field">
<input class="uk-radio" id="radio-six" type="radio" value="admin" name="user_type" checked>
<label for="radio-six">admin</label>
<input class="uk-radio" id="radio-seven" type="radio" value="user" name="user_type" >
<label for="radio-seven">user</label>
</div>
Here is one way you can customize your radio buttons.
.radio-toolbar .radio-item {
position: relative;
display: inline-block;
vertical-align: top;
margin: 15px 5px;
}
.radio-item input[type="radio"] {
position: absolute;
width: 0;
height: 0;
top: 0;
left: 0;
}
.radio-item label {
padding: 10px;
color: #fff;
border-radius: 10px;
background-color: grey;
border: 1px solid #000;
}
.radio-item input[type="radio"]:checked ~ label {
border-color: #f00;
}
<div class="radio-toolbar">
<div class="radio-item">
<input type="radio" id="radioone" name="product" value="first">
<label for="radioone">50</label>
</div>
<div class="radio-item">
<input type="radio" id="radiotwo" name="product" value="second">
<label for="radiotwo">100</label>
</div>
<div class="radio-item">
<input type="radio" id="radiothree" name="product" value="third">
<label for="radiothree">500</label>
</div>
</div>
Please let me know if this helps.
You need to hide the radio buttons and the left over label is still "clickable"
.radio-toolbar input[type="radio"] {
display: none;
}
I put all the working code on codepen here: https://codepen.io/stormingorman-the-vuer/pen/ExjKRvz
Try Like This. Make Your radio-toolbar input, width: 0;
also make your radio-toolbar label Like this
.radio-toolbar label {
background-color: #A9A9A9;
padding: 10px 20px;
font-size: 16px;
border-radius: 4px;
}
Here's the Example of jsfiddle
I have created the dummy radio buttons with my custom CSS,
As you can see in above example border is looking jagged.
I have added below custom css for box shadow
input[type='radio']:checked + label:before {
background: #3A3A3A;
box-shadow: inset 0px 0px 0px 4px #DEDEDE;
}
Here you can see the difference
without border-radius it seems like --
with border-radius it seems like --
You can see the difference in these two images,
Please see above fiddle example and give some suggestions.
Add margin to the li
ul.gfield_radio li{
padding-bottom: 5px;
}
.gfield_radio input[type='radio']+label:before {
content: '';
background: #DEDEDE;
border: 1px solid #359947;
display: inline-block;
vertical-align: middle;
width: 40px;
height: 40px;
padding: 2px;
margin-right: 10px;
text-align: center;
border-radius: 50%;
box-sizing: border-box;
}
.gfield_radio input[type='radio'] {
display: none;
}
.gfield_radio input[type='radio']:checked+label:before {
background: #3A3A3A;
box-shadow: inset 0px 0px 0px 4px #DEDEDE;
}
ul {
list-style: none;
margin-left: 0;
}
ul.gfield_radio li {
padding-bottom: 5px;
}
ul.gfield_checkbox li label {
display: inline-block;
line-height: 1.2;
}
<ul class="gfield_radio" id="input_1_3">
<li class="gchoice_1_3_0">
<input name="input_3" type="radio" value="First Choice" id="choice_1_3_0" tabindex="2">
<label for="choice_1_3_0" id="label_1_3_0">
First Choice
</label>
</li>
<li class="gchoice_1_3_1">
<input name="input_3" type="radio" value="Second Choice" id="choice_1_3_1" tabindex="3">
<label for="choice_1_3_1" id="label_1_3_1">
Second Choice
</label>
</li>
<li class="gchoice_1_3_2">
<input name="input_3" type="radio" value="Third Choice" id="choice_1_3_2" tabindex="4">
<label for="choice_1_3_2" id="label_1_3_2">
Third Choice
</label>
</li>
</ul>
I'm not sure if all browsers do this but if I provide a for attribute on a label that corresponds to an input's id, this makes hovering over the label trigger the input's hover styles which is undesirable in my case. Is there any way to stop this behavior while still having a form accessible to screen readers?
.field label {
display: block;
margin: 0 0 0.5em 0;
}
.field input {
background: white;
border: 1px solid #999;
border-radius: 0px;
color: black;
display: inline-block;
padding: 0.5em 0.7em
}
.field input:hover {
background: #efefff;
border-color: #333;
}
<div class="field">
<label for="myInput">Hover over this label:</label>
<input id="myInput" type="text">
</div>
You can use pointer-events:none; to disable hover effect for any element.
.field label {
display: block;
margin: 0 0 0.5em 0;
pointer-events:none;
}
.field input {
background: white;
border: 1px solid #999;
border-radius: 0px;
color: black;
display: inline-block;
padding: 0.5em 0.7em
}
.field input:hover {
background: #efefff;
border-color: #333;
}
<div class="field">
<label for="myInput">Hover over this label:</label>
<input id="myInput" type="text">
</div>
I want to make input box stays at center of a form, but I cannot make it work even using margin: 0 auto; or display: inline-block;
#message {
width: 90%;
...
margin: 0 auto;
}
Demo
margin: 0 auto works only with block elements, so :
#message {
margin: 0 auto;
display:block;
}
JSFiddle
Try this simple way:
<form id="subform" autocomplete="off" style="text-align:center">
<input id="message" placeholder="message goes here" type="text">
</form>
Add text-align:center to #subform
Input acts as inline-block element which you can simply align by giving text-align property to parent
#subform {
text-align: center;
}
#message {
width: 90%;
max-height: 25px;
line-height: 27px;
text-indent: 10px;
font-size: 1em;
color: #333;
background: none repeat scroll 0% 0% #FFF;
border-right: 1px solid #D9D9D9;
border-width: 1px;
border-style: solid;
border-color: #C0C0C0 #D9D9D9 #D9D9D9;
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
border-image: none;
margin: 0 auto;
}
<form id="subform" autocomplete="off">
<input id="message" placeholder="message goes here" type="text">
</form>
Try this simple way -
<input type="text" style="text-align:center;" >
I have a form which code looks like this:
<div id="right_sidebar">
<form id="your_name" name="your_name" action="#" method="post" style="display: block; ">
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" value="">
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname">
<label for="msg">Comment <span class="sp"></span></label>
<textarea name="msg" id="msg" rows="7"></textarea>
<input type="checkbox" name="agree">
<label for="agree">Accept the terms</label>
<button class="blue_button" type="submit">Send</button>
</fieldset>
</form>
</div>
And which is styled with the following CSS:
body {
color: #333;
font: 12px Arial,Helvetica Neue,Helvetica,sans-serif;
}
#right_sidebar {
padding-top: 12px;
width: 190px;
position:relative;
}
form {
background: #EEF4F7;
border: solid red;
border-width: 1px 0;
display: block;
margin-top: 10px;
padding: 10px;
}
form label {
color: #435E66;
display:block;
font-size: 12px;
}
form textarea {
border: 1px solid #ABBBBE;
margin-bottom: 10px;
padding: 4px 3px;
width: 160px;
-moz-border-radius: 3px;
border-radius: 3px;
}
form label a {
display: block;
padding-left: 10px;
position: relative;
text-decoration: underline;
}
form label a .sp {
background: #EEF4F7;
height: 0;
left: 0;
position: absolute;
top: 2px;
width: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #333;
}
form button.blue_button {
margin-top: 10px;
vertical-align: top;
}
button.blue_button{
color: white;
font-size: 12px;
height: 22px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
button.blue_button {
background-color: #76C8C6;
border: 1px solid #7798B7;
text-shadow: 1px 1px 0px #567C9E;
}
As you can see the checkbox is on top of the label. I would like both to be "on the same line". So, it would look like "[ ] Accept the terms". And how would I make that the text is vertically aligned to the checkbox.
How could I do both?
You can see it live here: form, checkbox failing
One option is to amend the style of the label element that follows the checkbox:
input[type=checkbox] + label {
display: inline-block;
margin-left: 0.5em;
margin-right: 2em;
line-height: 1em;
}
JS Fiddle demo.
This is, however, somewhat fragile as the margins are a little arbitrary (and the margin-right is purely to force the following button to the next line). Also the attribute-equals selector may cause problems in older browsers.
As implied, in comments, by Mr. Alien it is actually easier to target the checkbox itself with this selector-notation:
input[type=checkbox] {
float: left;
margin-right: 0.4em;
}
JS Fiddle demo.
It is because the label has display: block on it. It means that (without a float or hack) it will claim it's own line.
Change it to display: inline-block or leave the display rule away and you're done.
Seeing you did this intentionally for the first two labels, you should give the accept the terms label an id and use form #accepttermslabel {display: inline-block}. This will override the other rules et because it is more specific.
Wrap your checkbox and text within the <label> tag. Works with your current CSS as seen here in this jsFiddle Demo.
<label for="checkbox">
<input id="checkbox" type="checkbox"> My Label
</label>
Forked your fiddle here with one small change. I nested the checkbox inside the label.
<label for="agree"><input type="checkbox" name="agree">Accept the terms</label>
Hope it helps.
All you need to do is add display: inline to the label. Like this:
label[for="agree"] {
display: inline;
}
You may also have to add the following to get the Send button to stay on its own line:
button[type="submit"] {
display: block;
}
That is enough to make it work, but you could also nest the input inside the label, like this:
<label for="agree">
<input type="checkbox" name="agree" />
Accept the terms
</label>
However, most people avoid doing this because it is semantically constricting. I would go with the first method.
Set a class on the checkbox list as follows:
<asp:CheckBoxList ID="chkProject" runat="server" RepeatLayout="Table" RepeatColumns="3" CssClass="FilterCheck"></asp:CheckBoxList>
Then add the following CSS:
.FilterCheck td {
white-space:nowrap !important;
}
This ensures the label stays on the same line as the checkbox.
I had the same problem with bootstrap 3 horizontal-form, and finally found a try-error solution and works with plain html-css too.
Check my Js Fiddle Demo
.remember {
display: inline-block;
}
.remember input {
position: relative;
top: 2px;
}
<div>
<label class="remember" for="remember_check">
<input type="checkbox" id="remember_check" /> Remember me
</label>
</div>
Tried the flex attribute?
Here's your example with flex added:
HTML
<div id="right_sidebar">
<form id="send_friend" name="send_friend" action="#" method="post" style="display: block; ">
<fieldset>
<label for="from">From</label>
<input type="text" name="from" id="from" value="">
<label for="to">To</label>
<input type="text" name="to" id="to">
<label for="msg">Comment <span class="sp"></span>
</label>
<textarea name="msg" id="msg" rows="7"></textarea>
<div class="row">
<div class="cell" float="left">
<input type="checkbox" name="agree">
</div>
<div class="cell" float="right" text-align="left">
<label for="agree">Accept the terms</label>
</div>
</div>
<button class="blue_button" type="submit">Send</button>
</fieldset>
</form>
</div>
CSS
body {
color: #333;
font: 12px Arial, Helvetica Neue, Helvetica, sans-serif;
}
[class="row"] {
display: flex;
flex-flow: row wrap;
margin: 2 auto;
}
[class="cell"] {
padding: 0 2px;
}
#right_sidebar {
padding-top: 12px;
width: 190px;
position:relative;
}
form {
background: #EEF4F7;
border: solid red;
border-width: 1px 0;
display: block;
margin-top: 10px;
padding: 10px;
}
form label {
color: #435E66;
display:block;
font-size: 12px;
}
form textarea {
border: 1px solid #ABBBBE;
margin-bottom: 10px;
padding: 4px 3px;
width: 160px;
-moz-border-radius: 3px;
border-radius: 3px;
}
form label a {
display: block;
padding-left: 10px;
position: relative;
text-decoration: underline;
}
form label a .sp {
background: #EEF4F7;
height: 0;
left: 0;
position: absolute;
top: 2px;
width: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #333;
}
form button.blue_button {
margin-top: 10px;
vertical-align: top;
}
button.blue_button {
color: white;
font-size: 12px;
height: 22px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
button.blue_button {
background-color: #76C8C6;
border: 1px solid #7798B7;
text-shadow: 1px 1px 0px #567C9E;
}
Flex allows for table style control with the use of divs for example.
The simplest way I found to have the checkbox and the label aligned is :
.aligned {
vertical-align: middle;
}
<div>
<label for="check">
<input class="aligned" type="checkbox" id="check" /> align me
</label>
</div>
<div>
<input class="aligned" type="checkbox" />
<label>align me too</label>
</div>
<div>
<input type="checkbox" />
<label>dont align me</label>
</div>
I know this post is old, but I'd like to help those who will see this in the future. The answer is pretty simple.
<input type="checkbox" name="accept_terms_and_conditions" value="true" />
<label id="margin-bottom:8px;vertical-align:middle;">I Agree</label>