I am trying to css the input type radio button, and it does not work. The problem is that the input tag is inside the label tag and I am not able to change it.
input{
display:none;
}
label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 10px;
bottom: 1px;
background-color: #aaa;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
input[type=radio]:checked + label:before {
content: "\2022";
color: #f3f3f3;
font-size: 30px;
text-align: center;
line-height: 18px;
}
<label for="female"><input id="female" type="radio" name="gender" value="female">Female</label>
.control{
vertical-align: middle;
display: inline-block;
}
input{
margin-right: 10px;
}
input:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-left: -1px;
background-color: #aaa;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
input[type=radio]:checked:before {
content: "\2022";
color: #f3f3f3;
font-size: 30px;
text-align: center;
line-height: 18px;
}
<input id="female" class="control" type="radio" name="gender" value="female">
<label for="female" class="control">
Female</label>
You have to have an inner substitute for your input because the + only selects the next element on the same level.
input{
display:none;
}
span:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 10px;
bottom: 1px;
background-color: #aaa;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
input[type=radio]:checked + span:before {
content: "\2022";
color: #f3f3f3;
font-size: 30px;
text-align: center;
line-height: 18px;
}
<label for="female">
<input id="female" type="radio" name="gender" value="female">
<span for="female"></span>
Female
</label
Pls try to put your label after input:radio
<input id="female" type="radio" name="gender" value="female">
<label for="female"> Female.</label>
Related
I have an issue with my radio input.
It lets me change to the second option if im clicking on the label but it doesnt work for the first option. I can only choose the first option if im clicking on the selection-circle but i dont want to display it. It should work with a click on the text.
Any ideas?
.switch-field {
display: flex;
margin-bottom: 36px;
overflow: hidden;
justify-content: center;
}
.switch-field input {
position: absolute;
clip: rect(0, 0, 0, 0);
height: 100px;
width: 100px;
border: 1px;
/* overflow: hidden; */
}
.switch-field label {
background-color: #e4e4e4;
color: rgba(0, 0, 0, 0.6);
font-size: 14px;
line-height: 1;
text-align: center;
padding: 8px 10%;
margin-right: -1px;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
transition: all 0.1s ease-in-out;
}
.switch-field label:hover {
cursor: pointer;
}
.switch-field input:checked+label {
background-color: #cc7676;
box-shadow: none;
}
.switch-field label:first-of-type {
border-radius: 4px 0 0 4px;
}
.switch-field label:last-of-type {
border-radius: 0 4px 4px 0;
}
<div class="switch-field">
<input type="radio" id="strang1u3" name="switch-one" onchange="speichern(); clicksound()" />
<label for="strang1u2">Strang 1 & 3</label>
<input type="radio" id="strang2u4" name="switch-one" onchange="speichern(); clicksound()" />
<label for="strang2u4">Strang 2 & 4</label>
</div>
Your first label's for (strang1u2) and input's id (strang1u3) don't match. This may be causing this as the label isn't associated with the input.
I'm having difficulty with the following code - everything works as I wish it EXCEPT the contents of the check boxes. The ticks and crosses are too low.
Can someone tell me what I am doing wrong here please? I admit I hacked this code from several sources and glued it together, so I'm more than happy to admit I have misunderstood something or other.
Thanks!
.checkbox {
display: inline-block;
float: left;
width: 25%;
font-size: 16px;
line-height: 36px;
text-align: left;
}
input[type=checkbox] {
display: none;
}
.checkbox:before {
display: inline-block;
width: 18px;
height: 18px;
content: "\2715\0020";
background-color: #f3f3f3;
color: #000000;
text-align: center;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
border-radius: 3px;
margin: 0px 10px 0px 0px;
vertical-align: middle;
}
input[type=checkbox]:checked+.checkbox:before {
color: #f3f3f3;
background-color: #abcdef;
content: "\2714\0020";
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
}
<section>
<form>
<input id="option1" type="checkbox">
<label class="checkbox" for="option1">Unchecked</label>
<input id="option2" type="checkbox" checked>
<label class="checkbox" for="option2">Checked, changeable</label>
<input id="option3" type="checkbox" checked disabled>
<label class="checkbox" for="option3">Checked, fixed</label>
<input id="option4" type="checkbox" checked disabled>
<label class="checkbox" for="option4">Checked, fixed</label>
<input id="option5" type="checkbox">
<label class="checkbox" for="option5">Unchecked</label>
</form>
</section>
Add line-height to .checkbox:before{...} set it to 20px, or play this number,
.checkbox:before {
display: inline-block;
width: 18px;
height: 18px;
content: "\2715\0020";
background-color: #f3f3f3;
color: #000000;
text-align: center;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
border-radius: 3px;
margin: 0px 10px 0px 0px;
vertical-align: middle;
line-height: 20px;
}
Add line-height: 1.2; to your .checkbox:before:
.checkbox:before {
display: inline-block;
width: 18px;
height: 18px;
content: "\2715\0020";
background-color: #f3f3f3;
color: #000000;
text-align: center;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
border-radius: 3px;
margin: 0px 10px 0px 0px;
vertical-align: middle;
line-height: 1.2; /* add this*/
}
.checkbox {
display: inline-block;
float: left;
width: 25%;
font-size: 16px;
line-height: 36px;
text-align: left;
}
input[type=checkbox] {
display: none;
}
.checkbox:before {
display: inline;
padding:2px;
width: 18px;
height: 18px;
content: "\2715\0020";
background-color: #f3f3f3;
color: #000000;
text-align: center;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
border-radius: 3px;
margin: 0px 10px 0px 0px;
vertical-align: middle;
}
input[type=checkbox]:checked+.checkbox:before {
color: #f3f3f3;
background-color: #abcdef;
content: "\2714\0020";
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
}
<section>
<form>
<input id="option1" type="checkbox">
<label class="checkbox" for="option1">Unchecked</label>
<input id="option2" type="checkbox" checked>
<label class="checkbox" for="option2">Checked, changeable</label>
<input id="option3" type="checkbox" checked disabled>
<label class="checkbox" for="option3">Checked, fixed</label>
<input id="option4" type="checkbox" checked disabled>
<label class="checkbox" for="option4">Checked, fixed</label>
<input id="option5" type="checkbox">
<label class="checkbox" for="option5">Unchecked</label>
</form>
</section>
I have about 30px of vertical space between the radio buttons. Setting margin-top and margin-bottom to 0px had no effect. How can I eliminate the vertical space?
body {
margin: 2em;
font-family: Arial, Helvetica, sans-serif;
}
input[type="radio"] {
opacity: 0;
}
input[type="radio"]+label {
cursor: pointer;
border: 1px solid #ccc;
background: #efefef;
color: #aaa;
border-radius: 3px;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0);
display: block;
width: 200px;
height: 40px;
padding-left: 20px;
margin-top: 0px;
margin-bottom: 0px;
}
input[type="radio"]:checked+label {
background: #777;
border: 1px solid #444;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
color: white;
margin-top: 0px;
margin-bottom: 0px;
}
<input id="Radio1" name="Radios" type="radio">
<label for="Radio1">I am option1</label>
<input id="Radio2" name="Radios" type="radio" value="Option 2">
<label for="Radio2">I am option2</label>
<input id="Radio3" name="Radios" type="radio" value="Option 3">
<label for="Radio3">I am option3</label>
View on JSFiddle
If your intent is to hide the radio buttons themselves and just have the labels visible, then just apply a position: absolute to remove them from the page flow:
input[type="radio"] {
opacity: 0;
position: absolute;
}
https://jsfiddle.net/99b6pbz7/
remove it from the flow (absloute)
https://jsfiddle.net/0d227oj6/1/
body {
margin: 2em;
font-family: Arial, Helvetica, sans-serif;
}
input[type="radio"] {
opacity: 0;
position:absolute;/* removed from the flow */
}
input[type="radio"]+label {
cursor: pointer;
border: 1px solid #ccc;
background: #efefef;
color: #aaa;
border-radius: 3px;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0);
display: block;
width: 200px;
height: 40px;
padding-left: 20px;
margin-top: 0px;
margin-bottom: 0px;
}
input[type="radio"]:checked+label {
background: #777;
border: 1px solid #444;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
color: white;
margin-top: 0px;
margin-bottom: 0px;
}
<input id="Radio1" name="Radios" type="radio">
<label for="Radio1">I am option1</label>
<input id="Radio2" name="Radios" type="radio" value="Option 2">
<label for="Radio2">I am option2</label>
<input id="Radio3" name="Radios" type="radio" value="Option 3">
<label for="Radio3">I am option3</label>
just hide the actual radio buttons.
input[type="radio"] {
display: none;
}
I have the following HTML:
<input type="radio" checked="" class="regular-radio" name="radio-1-set" id="radio-1-set" /><label for="radio-1-set"></label> Driving
<br />
<input type="radio" class="regular-radio" name="radio-1-set" id="radio-2-set" /><label for="radio-2-set"></label> Public Transit
<br />
<input type="radio" class="regular-radio" name="radio-1-set" id="radio-3-set" /><label for="radio-3-set"></label> Walking
CSS:
label {
display: inline;
}
.radio-1 {
width: 193px;
}
.button-holder {
float: left;
margin-left: 6px;
margin-top: 16px;
}
.regular-radio {
display: none;
}
.regular-radio + label {
background-color: #fafafa;
border: 2px solid #cacece;
border-radius: 50px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 -15px 10px -12px rgba(0, 0, 0, 0.05) inset;
display: inline-block;
padding: 11px;
position: relative;
}
.regular-radio + label:before {
background: none repeat scroll 0 0 #FDFDFD;
border-radius: 50px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
content: " ";
font-size: 36px;
height: 8px;
left: 7px;
position: absolute;
top: 7px;
width: 8px;
}
.regular-radio:checked + label:after {
background: none repeat scroll 0 0 #94E325;
border-radius: 50px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
content: " ";
font-size: 36px;
height: 8px;
left: 7px;
position: absolute;
top: 7px;
width: 8px;
}
.regular-radio:checked + label {
background-color: #e9ecee;
border: 2px solid #adb8c0;
color: #99a1a7;
padding: 11px;
}
.regular-radio + label:active, .regular-radio:checked + label:active {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1) inset;
}
Shows this: http://jsfiddle.net/71vn4uhk/
How can I modify the CSS, so that the text line up vertically next to each radio button and add a little padding left of the text.
First, you need to place your label text within the label tags.
Then you can add necessary padding and styling to your radio buttons.
http://jsfiddle.net/ca8yzm56/
.regular-radio + label {padding-left: 25px;}
.regular-radio + label:before {top: 16px;}
.regular-radio:checked + label {padding-left: 25px;}
.regular-radio:checked + label:after {top: 16px;}
Try this, one of the way. Set this style property of lable's parent element.
body {
vertical-align: top;
line-height: 26px;
}
JSFIDDle
I am trying to get a form styled with css on my webpage, but i cant seem to get the form to recognize the css.As you can see below I am simply trying to stlye the element below is the code. Any thoughts? I am sure the solution is cake, new programmer over here.. any and all help is appreciated!
CSS
form {
background: -webkit-gradient(linear, bottom, left 175px, from(#CCCCCC), to(#EEEEEE));
background: -moz-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
margin: auto;
position: relative;
width: 550px;
height: 450px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
font-style: italic;
line-height: 24px;
font-weight: bold;
color: #09C;
text-decoration: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 10px;
border: 1px solid #999;
border: inset 1px solid #333;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
input {
width: 375px;
display: block;
border: 1px solid #999;
height: 25px;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
textarea#feedback {
width: 375px;
height: 150px;
}
textarea.message {
display: block;
}
input.button {
width: 100px;
position: absolute;
right: 20px;
bottom: 20px;
background: #09C;
color: #fff;
font-family: Tahoma, Geneva, sans-serif;
height: 30px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 1p solid #999;
}
input.button:hover {
background: #fff;
color: #09C;
}
textarea:focus, input:focus {
border: 1px solid #09C;
}
HTML
<form>
<div>
<h1>Contact Form :</h1>
<label>
<span>Your name</span><input id="name" type="text" name="name" />
</label>
<label>
<span>Email Address</span><input id="email" type="text" name="email" />
</label>
<label>
<span>Subject</span><input id="subject" type="text" name="subject" />
</label>
<label>
<span>Message</span><textarea id="feedback" name="feedback"></textarea>
<input type="button" value="Submit Form" />
</label>
</div>
</form>