I am trying to style individual radio buttons so that each selection comes out as a different color. However, my code only allows a minimum of two buttons of the same color before the addition of a third. Is there any work around? Here is the non-working code.
<html>
<style>
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
font-size: 13px;
}
input[type=radio] {
display: none;
}
label:before {
content: "";
display: inline-block;
width: 20px;
height: 19px;
margin-right: 15px;
position: absolute;
left: 0;
bottombottom: 1px;
background-color: #FFFFFF;
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
label:before {
border-radius: 8px;
}
.radio1 input[type=radio]:checked + label:before {
content: "\2022";
color: #73abfb;
font-size: 55px;
text-align: center;
line-height: 22px;
}
.radio2 input[type=radio]:checked + label:before {
content: "\2022";
color: #f8982d;
font-size: 55px;
text-align: center;
line-height: 22px;
}
.radio3 input[type=radio]:checked + label:before {
content: "\2022";
color: #9cc537;
font-size: 55px;
text-align: center;
line-height: 22px;
}
</style>
<div class="radio1">
<input id="w" type="radio" name="INTAKE" value="w">
<label for="w"></label></div>
<div class="radio2">
<input id="p" type="radio" name="INTAKE" value="P">
<label for="p"></label></div>
<div class="radio3">
<input id="c" type="radio" name="INTAKE" value="C">
<label for="c"></label></div>
</html>
You can set color in radio with class .radio3 like following:
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
font-size: 13px;
}
input[type=radio] {
display: none;
}
label:before {
content: "";
display: inline-block;
width: 20px;
height: 19px;
margin-right: 15px;
position: absolute;
left: 0;
bottom: 1px;
background-color: #FFFFFF;
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
label:before {
border-radius: 8px;
}
.radio1 input[type=radio]:checked + label:before {
content: "\2022";
color: #73abfb;
font-size: 55px;
text-align: center;
line-height: 22px;
}
.radio2 input[type=radio]:checked + label:before {
content: "\2022";
color: #f8982d;
font-size: 55px;
text-align: center;
line-height: 22px;
}
.radio3 input[type=radio]:checked + label:before {
content: "\2022";
color: red;/*here change color*/
font-size: 55px;
text-align: center;
line-height: 22px;
}
<div class="radio1">
<input id="w" type="radio" name="INTAKE" value="w">
<label for="w"></label>
</div>
<div class="radio2">
<input id="p" type="radio" name="INTAKE" value="P">
<label for="p"></label>
</div>
<div class="radio3">
<input id="c" type="radio" name="INTAKE" value="C">
<label for="c"></label>
</div>
Also you have to read css. I assume you take copy-paste this code from internet.
Related
I need help with the Select Dropdown. It moves the content (Hello World) when opened. I have used Radio Input to select the specfic option when performing a Search. If there is any other better solution for this type of functionality, please assist.
HTML
<span class="dropdown-el">
<input type="radio" name="sortType" value="Relevance" checked="checked" id="sort-relevance"><label for="sort-relevance">Relevance</label>
<input type="radio" name="sortType" value="Popularity" id="sort-best"><label for="sort-best">Product Popularity</label>
<input type="radio" name="sortType" value="PriceIncreasing" id="sort-low"><label for="sort-low">Price Low to High</label>
<input type="radio" name="sortType" value="PriceDecreasing" id="sort-high"><label for="sort-high">Price High to Low</label>
<input type="radio" name="sortType" value="ProductBrand" id="sort-brand"><label for="sort-brand">Product Brand</label>
<input type="radio" name="sortType" value="ProductName" id="sort-name"><label for="sort-name">Product Name</label>
</span>
<h1> Hello World</h1>
CSS
body {
text-align: center;
background: #ebf4fb;
min-height: 95vh;
margin: 0;
padding: 0;
border-bottom: 5vh solid #3694d7;
font-family: "Myriad Pro", "Arial", sans;
font-size: 24px;
}
.dropdown-el {
margin-top: 20vh;
min-width: 12em;
position: relative;
display: inline-block;
margin-right: 1em;
min-height: 2em;
max-height: 2em;
overflow: hidden;
top: 0.5em;
cursor: pointer;
text-align: left;
white-space: nowrap;
color: #444;
outline: none;
border: 0.06em solid transparent;
border-radius: 1em;
background-color: #cde4f5;
transition: 0.3s all ease-in-out;
}
.dropdown-el input:focus + label {
background: #def;
}
.dropdown-el input {
width: 1px;
height: 1px;
display: inline-block;
position: absolute;
opacity: 0.01;
}
.dropdown-el label {
border-top: 0.06em solid #d9d9d9;
display: block;
height: 2em;
line-height: 2em;
padding-left: 1em;
padding-right: 3em;
cursor: pointer;
position: relative;
transition: 0.3s color ease-in-out;
}
.dropdown-el label:nth-child(2) {
margin-top: 2em;
border-top: 0.06em solid #d9d9d9;
}
.dropdown-el input:checked + label {
display: block;
border-top: none;
position: absolute;
top: 0;
width: 100%;
}
.dropdown-el input:checked + label:nth-child(2) {
margin-top: 0;
position: relative;
}
.dropdown-el::after {
content: "";
position: absolute;
right: 0.8em;
top: 0.9em;
border: 0.3em solid #3694d7;
border-color: #3694d7 transparent transparent transparent;
transition: 0.4s all ease-in-out;
}
.dropdown-el.expanded {
border: 0.06em solid #3694d7;
background: #fff;
border-radius: 0.25em;
padding: 0;
box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 5px 0px;
max-height: 15em;
}
.dropdown-el.expanded label {
border-top: 0.06em solid #d9d9d9;
}
.dropdown-el.expanded label:hover {
color: #3694d7;
}
.dropdown-el.expanded input:checked + label {
color: #3694d7;
}
.dropdown-el.expanded::after {
transform: rotate(-180deg);
top: 0.55em;
}
JQuery
$('.dropdown-el').click(function(e) {
e.preventDefault();
e.stopPropagation();
$(this).toggleClass('expanded');
$('#'+$(e.target).attr('for')).prop('checked',true);
});
$(document).click(function() {
$('.dropdown-el').removeClass('expanded');
});
https://codepen.io/libsys/pen/bGKomaE
Please assist.
I have a custom checkbox which I want to add a tick mark inside it when checked
Here is code snippet:
input[type="checkbox"] {
transform: scale(3, 3) !important;
margin: 0px 21px;
}
.checkbox-custom,
.checkbox-custom-label {
display: inline-block;
vertical-align: middle;
margin: 5px 7px;
cursor: pointer;
font-size: 2.4rem;
font-family: "FuturaPT_BOOK";
/* padding: 6px; */
}
[type="checkbox"]:not(:checked)+label:after,
[type="checkbox"]:checked+label:after {
content: '✔';
position: absolute;
top: 8px;
left: 10px;
font-size: 24px;
line-height: 0.8;
color: #fff;
transition: all .2s;
}
.checkbox-custom+.checkbox-custom-label:before {
content: '';
background: #fff;
border: 1px solid #000;
display: inline-block;
vertical-align: middle;
width: 30px;
height: 30px;
padding: 2px;
margin-right: 30px;
text-align: center;
border-radius: 24%;
}
.checkbox-custom:checked+.checkbox-custom-label:before {
background: #0000;
box-shadow: inset 0px 0px 0px 4px #fff;
}
<p class="checkbox">
<input type="checkbox" class="checkbox checkbox-custom" name="cgv" id="cgv" value="1" {if $checkedTOS}checked="checked" {/if} />
<label class="checkbox-custom-label" for="cgv">{l s='I agree to the terms of service' mod='threepagecheckout'}</label>
{l s='(Read the Terms of Service)' mod='threepagecheckout'}
</p>
unfortunately when I click on check box nothing is displayed, I have tried different combination but nothing worked,
what am I doing wrong?
First you have to hide the default checkbox:
[type="checkbox"] {
display: none
}
Then put some general styling for label:after:
[type="checkbox"]+label:after {
content: '';
position: absolute;
...
}
Then style the :checked state
[type="checkbox"]:checked+label:after {
content: '✔';
}
And also position the tick mark so that it appears correctly in middle of your custom checkbox. Your tick mark was outside the box.
input[type="checkbox"] {
transform: scale(3, 3) !important;
margin: 0px 21px;
}
.checkbox-custom,
.checkbox-custom-label {
display: inline-block;
vertical-align: middle;
margin: 5px 7px;
cursor: pointer;
font-size: 2.4rem;
font-family: "FuturaPT_BOOK";
/* padding: 6px; */
}
[type="checkbox"] {
display: none
}
[type="checkbox"]+label:after {
content: '';
position: absolute;
top: 31px;
left: 23px;
font-size: 24px;
line-height: 0.8;
color: #fff;
transition: all .2s;
}
[type="checkbox"]:checked+label:after {
content: '✔';
}
.checkbox-custom+.checkbox-custom-label:before {
content: '';
background: #fff;
border: 1px solid #000;
display: inline-block;
vertical-align: text-top;
width: 30px;
height: 30px;
padding: 2px;
margin-right: 30px;
text-align: center;
border-radius: 24%;
}
.checkbox-custom:checked+.checkbox-custom-label:before {
background: #000;
box-shadow: inset 0px 0px 0px 4px #fff;
}
<p class="checkbox">
<input type="checkbox" class="checkbox checkbox-custom" name="cgv" id="cgv" value="1" />
<label class="checkbox-custom-label" for="cgv">I agree to the terms of service</label>
Read the Terms of Service
</p>
i have modified my code
/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
position: relative;
padding-left: 1.95em;
cursor: pointer;
}
/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
content: '';
position: absolute;
left: 0; top: 0;
width: 1.25em; height: 1.25em;
border: 2px solid #ccc;
background: #fff;
border-radius: 4px;
box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
content: '\2713\0020';
position: absolute;
top: .15em; left: .22em;
font-size: 1.3em;
line-height: 0.8;
color: #09ad7e;
transition: all .2s;
font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', Arial;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
opacity: 0;
transform: scale(0);
}
[type="checkbox"]:checked + label:after {
opacity: 1;
transform: scale(1);
}
<p class="checkbox">
<input type="checkbox" class="checkbox checkbox-custom" name="cgv" id="cgv" value="1" {if $checkedTOS}checked="checked" {/if} />
<label class="checkbox-custom-label" for="cgv">{l s='I agree to the terms of service' mod='threepagecheckout'}</label>
{l s='(Read the Terms of Service)' mod='threepagecheckout'}
</p>
I make custom radio checkbox this is my codes:
HTML:
.radio-custom input[type="radio"]:checked + label:after {
content: '';
position: absolute;
top: 50%;
left: 10.5px;
margin-top: -5px;
display: inline-block;
font-size: 11px;
line-height: 1;
width: 10px;
height: 10px;
background-color: #117efd;
border-radius: 50px;
}
<div class="radio-custom">
<input type="radio" name="test" id="test" value="test" />
<label>Test</label>
</div>
The problem that if I add any element after<input type="radio" name="test" id="test" value="test" /> label:after will not get what can to do to solve this problem ?
Change the + to a ~ and that will do the trick.
The reason yours didn't work is because you were using +, which is the adjacent selector or next-sibling selector. Changing it to the general sibling selector ~ will match the second element only if it's preceded by the first and both have the same parent.
.radio-custom input[type="radio"]:checked ~ label:after {
content: '';
position: absolute;
top: 50%;
left: 10.5px;
margin-top: -5px;
display: inline-block;
font-size: 11px;
line-height: 1;
width: 10px;
height: 10px;
background-color: #117efd;
border-radius: 50px;
}
<div class="radio-custom">
<input type="radio" name="test" id="test" value="test" />
<span></span>
<label>Test</label>
</div>
Follow this structure:
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
font-size: 13px;
}
input[type=radio] {
display: none;
}
label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 10px;
position: absolute;
left: 0;
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);
}
.radio label:before {
border-radius: 8px;
}
input[type=radio]:checked + label:before {
content: "\2022";
color: #f3f3f3;
font-size: 30px;
text-align: center;
line-height: 18px;
}
<div class="radio">
<input id="male" type="radio" name="gender" value="male">
<label for="male">Male</label>
<input id="female" type="radio" name="gender" value="female">
<label for="female">Female</label>
</div>
I'm trying to prevent separation of label and check box (or radio button) when there is a line wrap. Unfortunately I'm working with some very long labels over which I have no control.
It would be awesome if there could be columns where all the buttons align, but at a minimum, no splitting up of items.
thanks in advance.
#import url(http://fonts.googleapis.com/css?family=Montserrat);
/*basic reset*/
* {margin: 0; padding: 0;}
.html_S {
height: 100%;
}
.toast {
opacity: 1 !important;
}
.body_S {
min-height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
font-family: montserrat, arial, verdana;
background-color: transparent !important;
}
.reqSpan_S {
top: -15px;
position:relative;
}
.reqFieldText_S {
color: red;
padding: 0;
margin: 0;
}
.reqFieldStar_S {
font-weight: bold;
}
.k-button {
color: red;
}
.buttonCentre_S {
text-align: center;
}
.outerDiv_S {
width: 85%;
margin: 50px auto;
text-align: center;
}
#surveyForm {
top: -35px;
position:relative;
width: 85%;
margin: 50px auto;
text-align: left;
}
#surveyForm fieldset {
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 30px;
box-sizing: border-box;
width: 80%;
margin: 0 10%;
}
/*inputs*/
#surveyForm input, #surveyForm textarea {
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 13px;
}
/*buttons*/
#surveyForm .action-button {
text-align: center;
width: 100px;
background: #27AE60;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#surveyForm .action-button:hover, #surveyForm .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
#surveyForm .action-button-submit {
width: 100px;
background: #3498db;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
/*For Toast not part of surveyForm...*/
.action-button-ok {
width: 100px;
background: rgba(255, 255, 255, 0.3);
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#surveyForm .action-button-submit:hover, #surveyForm .action-button-submit:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #3498db;
}
/*headings*/
.fs-title {
font-size: 15px;
text-transform: uppercase;
color: #2C3E50;
margin-bottom: 10px;
}
.fs-subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
margin-bottom: 30px;
overflow: hidden;
/*CSS counters to number the steps*/
counter-reset: step;
}
#progressbar li {
list-style-type: none;
color: white;
text-transform: uppercase;
font-size: 9px;
/* width should be 100 divided by the number of steps */
/* this is set in the code dynamically in javascript */
width: 6.25%;
float: left;
position: relative;
}
#progressbar li:before {
content: counter(step);
counter-increment: step;
width: 20px;
line-height: 20px;
display: block;
font-size: 10px;
color: #333;
background: white;
border-radius: 3px;
margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: white;
position: absolute;
left: -50%;
top: 9px;
z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
/*connector not needed before the first step*/
content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before, #progressbar li.active:after{
background: #27AE60;
color: white;
}
.k-dropdown {
width: 100%;
}
.k-state-selected.k-state-focused {
background-color: #27AE60;
border: 0;
}
#surveyForm hr {
border: 0;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
margin-bottom: 10px;
}
/* https://stackoverflow.com/a/17541916/1550052 */
.rad,
.ckb{
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
padding: 10px;
}
.rad > input,
.ckb > input{ /* HIDE ORG RADIO & CHECKBOX */
visibility: hidden;
position: absolute;
}
/* RADIO & CHECKBOX STYLES */
.rad > i,
.ckb > i{ /* DEFAULT <i> STYLE */
display: inline-block;
vertical-align: middle;
width: 16px;
height: 16px;
border-radius: 50%;
transition: 0.2s;
box-shadow: inset 0 0 0 8px #fff;
border: 1px solid #d3d3d3;
background: #666;
margin-right: 4px;
}
/* CHECKBOX OVERWRITE STYLES */
.ckb > i {
width: 25px;
border-radius: 3px;
}
.rad:hover > i{ /* HOVER <i> STYLE */
box-shadow: inset 0 0 0 3px #fff;
background: #666;
}
.rad > input:checked + i{ /* (RADIO CHECKED) <i> STYLE */
box-shadow: inset 0 0 0 3px #fff;
background: #27AE60;
}
/* CHECKBOX */
.ckb > input + i:after{
content: "";
display: block;
height: 12px;
width: 12px;
margin: 2px;
border-radius: inherit;
transition: inherit;
background: #d3d3d3;
}
.ckb > input:checked + i:after{ /* (RADIO CHECKED) <i> STYLE */
margin-left: 11px;
background: #27AE60;
}
<body class='body_S'>
<form id='surveyForm'>
<!-- fieldsets -->
<fieldset >
<h2 class="fs-title">
Demographic Search Criteria
</h2>
<h2 class="fs-subtitle">
The demographic data you select here will be used by planners
</h2>
<h2 class="fs-subtitle">
1
</h2>
<label>Main Type of Business
</label>
<br />
<label class="ckb" for="cb-638-0">
<input type="checkbox" name="cb-638" id="cb-638-0" value="3223" />
<i></i>Accommodations
</label>
<label class="ckb" for="cb-638-1">
<input type="checkbox" name="cb-638" id="cb-638-1" value="3224" />
<i></i>Activities, Attractions & Tours
</label>
<label class="ckb" for="cb-638-2">
<input type="checkbox" name="cb-638" id="cb-638-2" value="3225" />
<i></i>Association
</label>
<label class="ckb" for="cb-638-3">
<input type="checkbox" name="cb-638" id="cb-638-3" value="3226" />
<i></i>Convention and Visitors Bureau
</label>
<label class="ckb" for="cb-638-4">
<input type="checkbox" name="cb-638" id="cb-638-4" value="3227" />
<i></i>Convention Centre
</label>
<label class="ckb" for="cb-638-5">
<input type="checkbox" name="cb-638" id="cb-638-5" value="3228" />
<i></i>Cruise Line
</label>
<label class="ckb" for="cb-638-6">
<input type="checkbox" name="cb-638" id="cb-638-6" value="3229" />
<i></i>Destination Management Company
</label>
<label class="ckb" for="cb-638-7">
<input type="checkbox" name="cb-638" id="cb-638-7" value="3230" />
<i></i>Destination Marketing Organization
</label>
<label class="ckb" for="cb-638-8">
<input type="checkbox" name="cb-638" id="cb-638-8" value="3231" />
<i></i>Event Service Provider
</label>
<label class="ckb" for="cb-638-9">
<input type="checkbox" name="cb-638" id="cb-638-9" value="3232" />
<i></i>Technology Provider
</label>
<label class="ckb" for="cb-638-10">
<input type="checkbox" name="cb-638" id="cb-638-10" value="3233" />
<i></i>Transportation
</label>
<label class="ckb" for="cb-638-11">
<input type="checkbox" name="cb-638" id="cb-638-11" value="3234" />
<i></i>Tourism Board
</label>
<label class="ckb" for="cb-638-12">
<input type="checkbox" name="cb-638" id="cb-638-12" value="3235" />
<i></i>Venues for Meeting/Events (non-hotel)
</label>
</fieldset>
</form>
</body>
</html>
css for the select groups starts at line 207 of the css section. Its from this stack overflow solution: https://stackoverflow.com/a/17541916/155005
Add float: left; to you label tags
#import url(http://fonts.googleapis.com/css?family=Montserrat);
/*basic reset*/
* {margin: 0; padding: 0;}
.html_S {
height: 100%;
}
.toast {
opacity: 1 !important;
}
.body_S {
min-height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
font-family: montserrat, arial, verdana;
background-color: transparent !important;
}
.reqSpan_S {
top: -15px;
position:relative;
}
.reqFieldText_S {
color: red;
padding: 0;
margin: 0;
}
.reqFieldStar_S {
font-weight: bold;
}
.k-button {
color: red;
}
.buttonCentre_S {
text-align: center;
}
.outerDiv_S {
width: 85%;
margin: 50px auto;
text-align: center;
}
#surveyForm {
top: -35px;
position:relative;
width: 85%;
margin: 50px auto;
text-align: left;
}
#surveyForm fieldset {
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 30px;
box-sizing: border-box;
width: 80%;
margin: 0 10%;
}
/*inputs*/
#surveyForm input, #surveyForm textarea {
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 13px;
}
/*buttons*/
#surveyForm .action-button {
text-align: center;
width: 100px;
background: #27AE60;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#surveyForm .action-button:hover, #surveyForm .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
#surveyForm .action-button-submit {
width: 100px;
background: #3498db;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
/*For Toast not part of surveyForm...*/
.action-button-ok {
width: 100px;
background: rgba(255, 255, 255, 0.3);
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#surveyForm .action-button-submit:hover, #surveyForm .action-button-submit:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #3498db;
}
/*headings*/
.fs-title {
font-size: 15px;
text-transform: uppercase;
color: #2C3E50;
margin-bottom: 10px;
}
.fs-subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
margin-bottom: 30px;
overflow: hidden;
/*CSS counters to number the steps*/
counter-reset: step;
}
#progressbar li {
list-style-type: none;
color: white;
text-transform: uppercase;
font-size: 9px;
/* width should be 100 divided by the number of steps */
/* this is set in the code dynamically in javascript */
width: 6.25%;
float: left;
position: relative;
}
#progressbar li:before {
content: counter(step);
counter-increment: step;
width: 20px;
line-height: 20px;
display: block;
font-size: 10px;
color: #333;
background: white;
border-radius: 3px;
margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: white;
position: absolute;
left: -50%;
top: 9px;
z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
/*connector not needed before the first step*/
content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before, #progressbar li.active:after{
background: #27AE60;
color: white;
}
.k-dropdown {
width: 100%;
}
.k-state-selected.k-state-focused {
background-color: #27AE60;
border: 0;
}
#surveyForm hr {
border: 0;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
margin-bottom: 10px;
}
/* http://stackoverflow.com/a/17541916/1550052 */
.rad,
.ckb{
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
padding: 10px;
clear: left;
float: left;
}
.rad > input,
.ckb > input{ /* HIDE ORG RADIO & CHECKBOX */
visibility: hidden;
position: absolute;
}
/* RADIO & CHECKBOX STYLES */
.rad > i,
.ckb > i{ /* DEFAULT <i> STYLE */
display: inline-block;
vertical-align: middle;
width: 16px;
height: 16px;
border-radius: 50%;
transition: 0.2s;
box-shadow: inset 0 0 0 8px #fff;
border: 1px solid #d3d3d3;
background: #666;
margin-right: 4px;
}
/* CHECKBOX OVERWRITE STYLES */
.ckb > i {
width: 25px;
border-radius: 3px;
}
.rad:hover > i{ /* HOVER <i> STYLE */
box-shadow: inset 0 0 0 3px #fff;
background: #666;
}
.rad > input:checked + i{ /* (RADIO CHECKED) <i> STYLE */
box-shadow: inset 0 0 0 3px #fff;
background: #27AE60;
}
/* CHECKBOX */
.ckb > input + i:after{
content: "";
display: block;
height: 12px;
width: 12px;
margin: 2px;
border-radius: inherit;
transition: inherit;
background: #d3d3d3;
}
.ckb > input:checked + i:after{ /* (RADIO CHECKED) <i> STYLE */
margin-left: 11px;
background: #27AE60;
}
<body class='body_S'>
<form id='surveyForm'>
<!-- fieldsets -->
<fieldset >
<h2 class="fs-title">
Demographic Search Criteria for iBE Appointment Scheduler For Your Company Profile
</h2>
<h2 class="fs-subtitle">
The demographic data you select here will be used by planners to help search and identify exhibitors they want to request meetings with. The data you fill in will default on all your booth staff members' profiles, however they can
edit the selections to customize it to what they offer if it differs from what you offer.
</h2>
<h2 class="fs-subtitle">
1
</h2>
<label>Main Type of Business
</label>
<br />
<label class="ckb" for="cb-638-0">
<input type="checkbox" name="cb-638" id="cb-638-0" value="3223" />
<i></i>Accommodations
</label>
<label class="ckb" for="cb-638-1">
<input type="checkbox" name="cb-638" id="cb-638-1" value="3224" />
<i></i>Activities, Attractions & Tours
</label>
<label class="ckb" for="cb-638-2">
<input type="checkbox" name="cb-638" id="cb-638-2" value="3225" />
<i></i>Association
</label>
<label class="ckb" for="cb-638-3">
<input type="checkbox" name="cb-638" id="cb-638-3" value="3226" />
<i></i>Convention and Visitors Bureau
</label>
<label class="ckb" for="cb-638-4">
<input type="checkbox" name="cb-638" id="cb-638-4" value="3227" />
<i></i>Convention Centre
</label>
<label class="ckb" for="cb-638-5">
<input type="checkbox" name="cb-638" id="cb-638-5" value="3228" />
<i></i>Cruise Line
</label>
<label class="ckb" for="cb-638-6">
<input type="checkbox" name="cb-638" id="cb-638-6" value="3229" />
<i></i>Destination Management Company
</label>
<label class="ckb" for="cb-638-7">
<input type="checkbox" name="cb-638" id="cb-638-7" value="3230" />
<i></i>Destination Marketing Organization
</label>
<label class="ckb" for="cb-638-8">
<input type="checkbox" name="cb-638" id="cb-638-8" value="3231" />
<i></i>Event Service Provider
</label>
<label class="ckb" for="cb-638-9">
<input type="checkbox" name="cb-638" id="cb-638-9" value="3232" />
<i></i>Technology Provider
</label>
<label class="ckb" for="cb-638-10">
<input type="checkbox" name="cb-638" id="cb-638-10" value="3233" />
<i></i>Transportation
</label>
<label class="ckb" for="cb-638-11">
<input type="checkbox" name="cb-638" id="cb-638-11" value="3234" />
<i></i>Tourism Board
</label>
<label class="ckb" for="cb-638-12">
<input type="checkbox" name="cb-638" id="cb-638-12" value="3235" />
<i></i>Venues for Meeting/Events (non-hotel)
</label>
</fieldset>
</form>
</body>
</html>
If you want to specifically prevent line breaks within the label element, there is CSS for that:
label.chk, label.rad {
white-space:nowrap;
}
If you want to allow line breaks but not if they would occur between the control and the beginning of the label, you may be able to adjust your code like this:
.nowrap {
white-space:nowrap;
}
<label class="ckb" for="cb-638-1">
<span class="nowrap"><input type="checkbox" name="cb-638" id="cb-638-1" value="3224" />
<i></i>Activities,</span> Attractions & Tours
</label>
(You'll also need to modify the .chk > ... and .rad > ... rules to account for the additional span.)
If you're satisfied with the labels just being columnar, just make label a block level element:
label {
display:block;
}
I have created a div with custom checkbox and i want to change the checkbox image by the custom image. and i have done it but i am unable to change the size of the image.Please help me.
Any help will be appreciated.
<div class="left">
<input id="Option" type="checkbox">
<label class="checkbox" for="Option"> </label>
</div>
And CSS which i have used.
.checkbox {
display: inline-block;
cursor: pointer;
font-size: 13px; line-height:18px;
}
input[type=checkbox] {
display:none;
}
.checkbox:before {
content: "";
display: inline-block;
width: 25px;
height: 25px;
vertical-align: middle;
background-color: rgb(248,183,51);
color: #f3f3f3;
text-align: center;
}
input[type=checkbox]:checked + .checkbox:before {
content: url("images/Tick.png");
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
font-size: 15px;
}
You can do this without using images, just with simple characters and CSS, so you can make change on your custom checkbox just with adjusting font-size or changing color.
Please see the below example:
/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
position: relative;
padding-left: 25px;
cursor: pointer;
}
/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
content: '';
position: absolute;
left:0; top: 2px;
width: 17px; height: 17px;
border: 1px solid #aaa;
background: #f8f8f8;
border-radius: 3px;
box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
content: '✔';
position: absolute;
top: 3px; left: 4px;
font-size: 18px;
line-height: 0.8;
color: #09ad7e;
transition: all .1s;
transform-origin: center;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
opacity: 0;
transform: scale(0);
transform-origin: center;
}
[type="checkbox"]:checked + label:after {
opacity: 1;
transform: scale(1);
transform-origin: center;
}
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
box-shadow: none;
border-color: #bbb;
background-color: #ddd;
}
[type="checkbox"]:disabled:checked + label:after {
color: #999;
}
[type="checkbox"]:disabled + label {
color: #aaa;
}
/* accessibility */
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before {
border: 1px dotted blue;
}
/* hover style just for information */
label:hover:before {
border: 1px solid #4778d9!important;
}
/* Useless styles, just for demo design */
body {
font-family: "Open sans", "Segoe UI", "Segoe WP", Helvetica, Arial, sans-serif;
color: #777;
}
h1, h2 {
margin-bottom: 5px;
font-weight: normal;
text-align: center;
}
h2 {
margin: 5px 0 2em;
color: #aaa;
}
form {
width: 80px;
margin: 0 auto;
}
.txtcenter {
margin-top: 4em;
font-size: .9em;
text-align: center;
color: #aaa;
}
.copy {
margin-top: 2em;
}
.copy a {
text-decoration: none;
color: #4778d9;
}
<form action="#">
<p>
<input type="checkbox" id="test1" />
<label for="test1">Red</label>
</p>
<p>
<input type="checkbox" id="test2" checked="checked" />
<label for="test2">Yellow</label>
</p>
<p>
<input type="checkbox" id="test3" checked="checked" disabled="disabled" />
<label for="test3">Green</label>
</p>
<p>
<input type="checkbox" id="test4" disabled="disabled" />
<label for="test4">Brown</label>
</p>
</form>
or you can check on CodePen as well: Custom Checkbox Without images
(Edited)
Custom Checkbox background-image property
Please check the following live example for a custom checkbox using background-image:
.checkbox {
display: inline-block;
cursor: pointer;
font-size: 13px; line-height:18px;
}
input[type=checkbox] {
display:none;
}
.checkbox:before {
content: "";
display: inline-block;
width: 25px;
height: 25px;
vertical-align: middle;
background-color: rgb(248,183,51);
color: #f3f3f3;
text-align: center;
}
input[type=checkbox]:checked + .checkbox:before {
background: url("https://cdn1.iconfinder.com/data/icons/windows8_icons_iconpharm/26/checked_checkbox.png") no-repeat center center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
font-size: 15px;
background-size: 10px 10px;
}
<div class="left">
<input id="Option" type="checkbox">
<label class="checkbox" for="Option"> </label>
</div>
Please make sure that your image is exist in right path.
Also please consider you can re-position your background image by setting the horizontal and vertical position for background property as well.
Main thing I did was set backgrounds background-size to cover.
.checkbox {
display: inline-block;
cursor: pointer;
font-size: 13px; line-height:18px;
}
input[type=checkbox] {
display:none;
}
.checkbox:before {
content: "";
display: inline-block;
width: 40px;
height: 40px;
vertical-align: middle;
background-color: rgb(248,183,51);
color: #f3f3f3;
text-align: center;
}
input[type=checkbox]:checked + .checkbox:before {
background: url("https://cdn1.iconfinder.com/data/icons/windows8_icons_iconpharm/26/checked_checkbox.png");
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
font-size: 15px;
background-size: contain;
}
<div class="left">
<input id="Option" type="checkbox">
<label class="checkbox" for="Option"> </label>
</div>