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
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.
.wrapper-dropdown-3 {
width: 200px;
margin: 0 auto;
padding: 10px;
background: #fff;
border-radius: 7px;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 1px rgba(50, 50, 50, 0.1);
cursor: pointer;
font-weight: bold;
color: #8AA8BD;
}
.wrapper-dropdown-3:after {
content: "";
width: 0;
height: 0;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #8aa8bd transparent;
}
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>Transport</span>
</div>
In the above code I want to insert the blue arrow to the middle right of the .wrapper-dropdown-3. As of now it is situated on the top right near the Transport span. I am not sure how I can move it to the very right middle? Any suggestions?
You can use absolute positioning against container:
.wrapper-dropdown-3 {
width: 200px;
margin: 0 auto;
padding: 10px;
background: #fff;
border-radius: 7px;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 1px rgba(50, 50, 50, 0.1);
cursor: pointer;
font-weight: bold;
color: #8AA8BD;
position: relative;
}
.wrapper-dropdown-3:after {
content: "";
width: 0;
height: 0;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #8aa8bd transparent;
position: absolute;
right: 5px;
top: calc(50% + 6px / 2); /* 6px here is border-width value to compensate a fact that arrow is made from border */
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>Transport</span>
</div>
Simply use positionning like this :
.wrapper-dropdown-3 {
width: 200px;
margin: 0 auto;
padding: 10px;
background: #fff;
border-radius: 7px;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 1px rgba(50, 50, 50, 0.1);
cursor: pointer;
font-weight: bold;
color: #8AA8BD;
/*Code added*/
position:relative;
/**/
}
.wrapper-dropdown-3:after {
/*Code added*/
position:absolute;
right:5px;
top:50%;
/**/
content: "";
width: 0;
height: 0;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #8aa8bd transparent;
}
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>Transport</span>
</div>
I'm having problem aligning my labels to the middle of the checkboxes. I have tried everything it seems and after hours of testing i'm finally giving up.
I have tested with display: inline-block, vertical-align: middle; but nothing seems to work. I have however found out that putting characters into content:'' makes the text float top.
I think i'm missing something...
JSFiddle
.styled-checkbox {
position: absolute;
opacity: 0;
}
.styled-checkbox + label {
position: relative;
cursor: pointer;
padding: 0;
color: inherit;
font-size: inherit;
}
.styled-checkbox + label:before {
content: '';
margin-right: 10px;
display: inline-block;
width: 28px;
height: 28px;
background: #cad1d9;
border-radius: 3px;
}
.styled-checkbox:hover + label:before {
background: #f35429;
}
.styled-checkbox:focus + label:before {
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
.styled-checkbox:checked + label:before {
background: #f35429;
}
.styled-checkbox:disabled + label {
color: #b8b8b8;
cursor: auto;
}
.styled-checkbox:disabled + label:before {
box-shadow: none;
background: #ddd;
}
.styled-checkbox:checked + label:after {
content: '';
position: absolute;
left: 5px;
top: 0px;
background: white;
width: 3px;
height: 3px;
box-shadow: 2px 0 0 white, 4px 0 0 white, 6px 0 0 white, 8px 0 0 white, 8px -2px 0 white, 8px -4px 0 white, 8px -6px 0 white, 8px -16px 0 white, 8px -14px 0 white, 8px -12px 0 white, 8px -10px 0 white, 8px -8px 0 white;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
<input type="checkbox" name="inc_creditaccounts" value="1" id="checkbox-15-1-0" class="styled-checkbox" CHECKED/>
<label for="checkbox-15-1-0" class="label-search-box">Cant be aligned middle</label>
Add vertical-align: middle in :before selector and set top position in :after
.styled-checkbox {
position: absolute;
opacity: 0;
}
.styled-checkbox + label {
position: relative;
cursor: pointer;
padding: 0;
color: inherit;
font-size: inherit;
}
.styled-checkbox + label:before {
content: '';
margin-right: 10px;
display: inline-block;
width: 28px;
height: 28px;
background: #cad1d9;
border-radius: 3px;
vertical-align: middle;
}
.styled-checkbox:hover + label:before {
background: #f35429;
}
.styled-checkbox:focus + label:before {
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
.styled-checkbox:checked + label:before {
background: #f35429;
}
.styled-checkbox:disabled + label {
color: #b8b8b8;
cursor: auto;
}
.styled-checkbox:disabled + label:before {
box-shadow: none;
background: #ddd;
}
.styled-checkbox:checked + label:after {
content: '';
position: absolute;
left: 5px;
top: 9px;
background: white;
width: 3px;
height: 3px;
box-shadow: 2px 0 0 white, 4px 0 0 white, 6px 0 0 white, 8px 0 0 white, 8px -2px 0 white, 8px -4px 0 white, 8px -6px 0 white, 8px -16px 0 white, 8px -14px 0 white, 8px -12px 0 white, 8px -10px 0 white, 8px -8px 0 white;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
<input type="checkbox" name="inc_creditaccounts" value="1" id="checkbox-15-1-0" class="styled-checkbox" CHECKED/>
<label for="checkbox-15-1-0" class="label-search-box">Cant be aligned middle</label>
I have default checkboxes on my website, with only text on every checkbox(e.g. example).
Does it possible to design the checkboxes to have images on them? and maybe to put "v" mark on a checkbox if it been chosen?
I want it to look something like:
This is how you can simulate an image based checkbox using a label
input {
display: none
}
/* switch image */
label[for="chk1"] {
display: inline-block;
text-align: center;
width: 100px;
height: 100px;
border: 2px solid black;
background: url(http://placehold.it/100/f00);
}
#chk1:checked ~ label[for="chk1"] {
background: url(http://placehold.it/100/ff0);
}
/* add content */
label[for="chk2"] {
display: inline-block;
text-align: center;
width: 100px;
height: 100px;
border: 2px solid black;
position: relative;
}
#chk2:checked ~ label[for="chk2"]::after {
content: 'V';
position: absolute;
left: 0;
right: 0;
font-size: 90px;
font-weight: bold;
font-family: arial;
}
<input id="chk1" type="checkbox">
<input id="chk2" type="checkbox">
<label for="chk1"></label>
<label for="chk2"></label>
<div>Click a box to toggle it</div>
I don't think most people put images in their checkboxes. They either make an image act like a checkbox like #LGSon did, or they wrap an image and checkbox together inside of a div. Something like this:
function toggleCheck(sibling) {
var checkBox = sibling.parentNode.getElementsByTagName("input")[0];
checkBox.checked = !checkBox.checked;
}
.image-box {
width: 150px;
text-align: center;
background: #E9E8E7;
padding: 10px;
-webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
}
.image-box img {
max-width: 100%;
display: block;
margin-bottom: 7px;
}
<div class="image-box">
<img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" onClick="toggleCheck(this);" />
<input id="dogs" type="checkbox" name="dogs" value="Dog">
<label for="dogs">I like dogs</label>
</div>
I have HTML and CSS code that I've used to build a custom checkbox. I believe my code has the correct web-kits but it doesn't seem to work on FireFox.
Here's the code:
HTML
<input type='checkbox' style="float: left" class='regular-checkbox big-checkbox'
checked='checked' id='product-45-45' name='product_id_page-0[45-45]'
value='45-45' data-first_price="11.99" data-second_price="" data-paysys="" />
CSS
.regular-checkbox {
-webkit-appearance: none;
-moz-appearance: none;
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0,0,0,0),inset 0 -15px 10px -12px rgba(0,0,0,0);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0),inset 0 -15px 10px -12px rgba(0,0,0,0);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0),inset 0 -15px 10px -12px rgba(0,0,0,0);
padding: 9px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
display: inline-block;
position: relative;
}
.regular-checkbox:active,
.regular-checkbox:checked:active {
box-shadow: 0 1px 2px rgba(0,0,0,0),inset 0 1px 3px rgba(0,0,0,0);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0),inset 0 1px 3px rgba(0,0,0,0);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0),inset 0 1px 3px rgba(0,0,0,0);
}
.regular-checkbox:checked {
background-color: #e9ecee;
box-shadow: 0 1px 2px rgba(0,0,0,0),inset 0 -15px 10px -12px rgba(0,0,0,0),inset 15px 10px -12px rgba(255,0,0,0);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0),inset 0 -15px 10px -12px rgba(0,0,0,0),inset 15px 10px -12px rgba(255,0,0,0);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0),inset 0 -15px 10px -12px rgba(0,0,0,0),inset 15px 10px -12px rgba(255,0,0,0);
}
.regular-checkbox:checked:after {
content: '\2714';
font-size: 14px;
position: absolute;
top: 0;
left: 3px;
color: #19a73e;
}
.big-checkbox {
padding: 18px;
}
.big-checkbox:checked:after {
font-size: 37px;
top: -7px;
left: 2px;
}
Screen shot of the desired outcome (works in Chrome):
Try use this code, I don't know explain, but I did one version for you ;)
.regular-checkbox{
display: inline-block;
border-radius: 50%;
width: 38px;
height: 38px;
border: 1px solid #ccc;
}
.regular-checkbox input{
opacity: 0;
position: absolute;
}
.regular-checkbox small{
width: 100%;
height: 100%;
float: left;
}
.regular-checkbox input:checked ~ small:after{
content: '\2714';
height: 38px;
width: 38px;
color: green;
font-size: 26px;
text-align: center;
float: left;
}
<label class="regular-checkbox">
<input type="checkbox">
<small></small>
</label>
This is a known issue in Firefox - there's a workaround with using <label> and <span>.
MDN also mentions that styling some form elements is a bit of a pain - read more here.
.checkbox input[type="checkbox"] {
display: none;
}
.checkbox span {
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0), inset 0 -15px 10px -12px rgba(0, 0, 0, 0);
padding: 22px;
-webkit-border-radius: 50%;
border-radius: 50%;
display: inline-block;
position: relative;
}
.checkbox :active + span,
.checkbox :checked:active span {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0), inset 0 1px 3px rgba(0, 0, 0, 0);
}
.checkbox :checked + span {
background-color: #e9ecee;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0), inset 0 -15px 10px -12px rgba(0, 0, 0, 0), inset 15px 10px -12px rgba(255, 0, 0, 0);
}
.checkbox :checked + span:after {
content: '\2714';
font-size: 14px;
position: absolute;
top: 0;
left: 0px;
width: 100%;
color: #19a73e;
text-align: center;
}
.big-checkbox {
padding: 18px;
}
.big-checkbox:checked + span:after {
font-size: 37px;
}
<label class="checkbox" for="product-45-45">
<input type='checkbox' style="float: left" class='regular-checkbox big-checkbox' checked='checked' id='product-45-45' name='product_id_page-0[45-45]' value='45-45' data-first_price="11.99" data-second_price="" data-paysys="" />
<span></span>
</label>