Multiple fill colors in star rating survey

Multiple fill colors in star rating survey - javascript

I need to build a 5 star rating responses to set of survey questions. The stars need to be filled with gold color if the rating is 1 or 2 else it need to be filled with green color if the rating is more than 2 star.
I have built the 5 stars which gets filled with gold color. How can I make it dynamic to change color to green?
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.rating {
font-size: 0;
}
.rating:after {
content: " ";
clear: both;
display: block;
}
.rating input {
display: none;
}
.rating-label {
height: 16px;
width: 16px;
color: #ccc;
font-size: 24px;
line-height: 16px;
margin-right: 4px;
text-align: center;
display: inline-block;
}
.rating[dir="rtl"] {
unicode-bidi: bidi-override;
}
.rating[dir="rtl"]>input:checked~.rating-label {
font-size: 0;
}
.rating[dir="rtl"]>input:checked~.rating-label:before {
content: "\2605";
color: #feca02;
}
.rating-label.is-active {
color: #feca02;
}
.rating-large .rating-label {
height: 24px;
width: 24px;
font-size: 32px;
margin-right: 8px;
}
.rating-large .rating-label:before {
font-size: 32px;
}
.rating-small .rating-label {
height: 12px;
width: 12px;
font-size: 16px;
margin-right: 2px;
}
.rating-small .rating-label:before {
font-size: 16px;
}
body {
padding: 30px 30px 0;
text-align: center;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.rating {
margin: 15px auto;
}
button {
display: inline-block;
padding: 15px 55px;
background-color: #1d1f20;
color: #fff;
border: 0;
font-size: 12px;
text-transform: uppercase;
}
<div class="wrapper">
<form class="demoForm">
<div class="rating rating-large" dir="rtl">
<input type="radio" name="rate" id="5" value="5" />
<label class="rating-label" for="5">&#9734</label>
<input type="radio" name="rate" id="4" value="4" />
<label class="rating-label" for="4">&#9734</label>
<input type="radio" name="rate" id="3" value="3" />
<label class="rating-label" for="3">&#9734</label>
<input type="radio" name="rate" id="2" value="2" />
<label class="rating-label" for="2">&#9734</label>
<input type="radio" name="rate" id="1" value="1" />
<label class="rating-label" for="1">&#9734</label>
</div>
</form>
</div>

You can use the nth-child selector to change the colour dependant on the number of stars chosen.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.rating {
font-size: 0;
}
.rating:after {
content: " ";
clear: both;
display: block;
}
.rating input {
display: none;
}
.rating-label {
height: 16px;
width: 16px;
color: #ccc;
font-size: 24px;
line-height: 16px;
margin-right: 4px;
text-align: center;
display: inline-block;
}
.rating[dir="rtl"] {
unicode-bidi: bidi-override;
}
.rating[dir="rtl"]>input:checked~.rating-label {
font-size: 0;
}
.rating[dir="rtl"]>input:checked~.rating-label:before {
content: "\2605";
color: #feca02;
}
.rating[dir="rtl"]>input:nth-child(1):checked~.rating-label:before {
color: #feca02;
}
.rating[dir="rtl"]>input:nth-child(3):checked~.rating-label:before {
color: green;
}
.rating[dir="rtl"]>input:nth-child(5):checked~.rating-label:before {
color: pink;
}
.rating[dir="rtl"]>input:nth-child(7):checked~.rating-label:before {
color: purple;
}
.rating[dir="rtl"]>input:nth-child(9):checked~.rating-label:before {
color: red;
}
.rating-label.is-active {
color: #feca02;
}
.rating-large .rating-label {
height: 24px;
width: 24px;
font-size: 32px;
margin-right: 8px;
}
.rating-large .rating-label:before {
font-size: 32px;
}
.rating-small .rating-label {
height: 12px;
width: 12px;
font-size: 16px;
margin-right: 2px;
}
.rating-small .rating-label:before {
font-size: 16px;
}
body {
padding: 30px 30px 0;
text-align: center;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.rating {
margin: 15px auto;
}
button {
display: inline-block;
padding: 15px 55px;
background-color: #1d1f20;
color: #fff;
border: 0;
font-size: 12px;
text-transform: uppercase;
}
<div class="wrapper">
<form class="demoForm">
<div class="rating rating-large" dir="rtl">
<input type="radio" name="rate" id="5" value="5" />
<label class="rating-label" for="5">&#9734</label>
<input type="radio" name="rate" id="4" value="4" />
<label class="rating-label" for="4">&#9734</label>
<input type="radio" name="rate" id="3" value="3" />
<label class="rating-label" for="3">&#9734</label>
<input type="radio" name="rate" id="2" value="2" />
<label class="rating-label" for="2">&#9734</label>
<input type="radio" name="rate" id="1" value="1" />
<label class="rating-label" for="1">&#9734</label>
</div>
</form>
</div>
The stars need to be filled with gold color if the rating is 1 or 2
else it need to be filled with green color if the rating is more than
2 star
For this specific case you could use the following...
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.rating {
font-size: 0;
}
.rating:after {
content: " ";
clear: both;
display: block;
}
.rating input {
display: none;
}
.rating-label {
height: 16px;
width: 16px;
color: #ccc;
font-size: 24px;
line-height: 16px;
margin-right: 4px;
text-align: center;
display: inline-block;
}
.rating[dir="rtl"] {
unicode-bidi: bidi-override;
}
.rating[dir="rtl"]>input:checked~.rating-label {
font-size: 0;
}
.rating[dir="rtl"]>input:checked~.rating-label:before {
content: "\2605";
color: green;
}
.rating[dir="rtl"]>input:nth-child(7):checked~.rating-label:before,
.rating[dir="rtl"]>input:nth-child(9):checked~.rating-label:before{
color: #feca02;
}
.rating-label.is-active {
color: #feca02;
}
.rating-large .rating-label {
height: 24px;
width: 24px;
font-size: 32px;
margin-right: 8px;
}
.rating-large .rating-label:before {
font-size: 32px;
}
.rating-small .rating-label {
height: 12px;
width: 12px;
font-size: 16px;
margin-right: 2px;
}
.rating-small .rating-label:before {
font-size: 16px;
}
body {
padding: 30px 30px 0;
text-align: center;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.rating {
margin: 15px auto;
}
button {
display: inline-block;
padding: 15px 55px;
background-color: #1d1f20;
color: #fff;
border: 0;
font-size: 12px;
text-transform: uppercase;
}
<div class="wrapper">
<form class="demoForm">
<div class="rating rating-large" dir="rtl">
<input type="radio" name="rate" id="5" value="5" />
<label class="rating-label" for="5">&#9734</label>
<input type="radio" name="rate" id="4" value="4" />
<label class="rating-label" for="4">&#9734</label>
<input type="radio" name="rate" id="3" value="3" />
<label class="rating-label" for="3">&#9734</label>
<input type="radio" name="rate" id="2" value="2" />
<label class="rating-label" for="2">&#9734</label>
<input type="radio" name="rate" id="1" value="1" />
<label class="rating-label" for="1">&#9734</label>
</div>
</form>
</div>

Related

Form input checkbox and file type isn't functioning

I'm trying to make a form for adding a blog page.
I have title form, date form, content form, checkbox for blog category form and image form for the topic image.
When I try to fill the form, only the 3 of the 4 checkbox forms that worked and when I click upload image it won't show the file selector.
Here's the screenshot:
Form screenshot
This is what I'm trying to achieve:
Form screenshot
I've tried to browse for solution but my English isn't very good for browsing, I don't know the keyword to search for the solution.
Please help, I've stuck on this for 3 hours.
Here's the full code:
let blogs = []
function addBlog(event) {
event.preventDefault()
let inputName = document.getElementById("inputProjectName").value
let inputContent = document.getElementById("inputDescription").value
let inputImage = document.getElementById("inputImage")
const projectDate = {
startDate: document.getElementById("inputStartDate").value,
endDate: document.getElementById("inputEndDate").value
}
image = URL.createObjectURL(image.files[0])
let cardIcons = {
html: document.querySelector('input[name="checkHtml"]').checked,
css: document.querySelector('input[name="checkCss"]').checked,
nodeJs: document.querySelector('input[name="checkNode"]').checked,
reactJs: document.querySelector('input[name="checkReact"]').checked
}
let blog = {
title: inputName,
date: projectDate,
content: inputContent,
icons: cardIcons,
image: inputImage
}
blogs.push(blog)
console.table(blogs)
}
/* FORM */
.mpi-title {
width: 100%;
margin: 50px 0px;
font-size: 30px;
text-align: center;
font-family: 'Lato', sans-serif !important;
font-weight: 700;
}
.mpi-form-container {
display: flex;
justify-content: center;
}
.mpi-form {
width: 540px;
display: flex;
justify-content: center;
}
.mpi-form label {
font-size: 25px;
font-weight: bold;
}
.mpi-form .mpi-name input,
.mpi-date input {
width: 100%;
height: 50px;
padding: 5px;
box-sizing: border-box;
font-size: 20px;
font-weight: 400;
padding-bottom: 5px;
margin-top: 5px;
margin-bottom: 20px;
border: 1px solid #c4c4c4;
border-radius: 8px;
box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}
.mpi-date {
flex-grow: 1;
display: flex;
gap: 10px;
}
.mpi-date .date-start {
flex: 50%;
}
.mpi-date .date-end {
flex: 50%;
}
[type="date"]::-webkit-datetime-edit {
opacity: 0;
}
[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0;
width: 100%;
}
.mpi-desc textarea {
width: 100%;
font-size: 20px;
font-weight: 400;
padding: 8px;
margin-top: 5px;
margin-bottom: 20px;
border: 1px solid #c4c4c4;
box-sizing: border-box;
border-radius: 8px;
height: 200px;
}
.mpi-check {
display: flex;
gap: 120px;
margin: 20px 0px;
}
.mpi-check label {
font-size: 20px;
}
.check-left {
display: flex;
flex-direction: column;
row-gap: 20px;
}
.check-right {
display: flex;
flex-direction: column;
row-gap: 20px;
}
.check-label {
display: block;
position: relative;
padding-left: 35px;
color: #514a4a;
margin-bottom: 12px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.check-label input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: white;
border-radius: 5px;
box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}
.check-label:hover input~.checkmark {
background-color: #ccc;
}
.check-label input:checked~.checkmark {
background-color: #2196F3;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.check-label input:checked~.checkmark:after {
display: block;
}
.check-label .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.mpi-image {
overflow: hidden;
height: 50px;
width: 100%;
font-size: 20px;
font-weight: 400;
box-sizing: border-box;
margin-top: 5px;
margin-bottom: 20px;
background: #f4f3f3;
border: 1px solid #c4c4c4;
border-radius: 8px;
cursor: pointer;
padding-right: 8px;
box-shadow: 0 10px 10px rgb(0 0 0 / 26%);
}
.mpi-image label {
width: 100%;
height: 50px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
}
.mpi-choose {
margin-top: -2px;
border-radius: 8px;
align-items: center;
padding: 13px 10px 13px 10px;
background-color: #e4e4e4;
color: #b2abab;
}
.mpi-attach {
padding-right: 10px;
}
.mpi-submit button {
margin-top: 30px;
float: right;
padding: 10px 30px;
border: none;
border-radius: 25px;
background-color: var(--btn);
color: white;
font-size: 15px;
font-weight: bold;
cursor: pointer;
margin-bottom: 110px;
}
.mpi-submit button:hover {
background-color: var(--btn-hover)
}
/* x FORM */
<div class="mpi-form">
<!--MP = My Project Input-->
<form onsubmit="addBlog(event)">
<div class="mpi-name">
<label for="inputProjectName">Project Name</label>
<input type="text" id="inputProjectName">
</div>
<div class="mpi-date">
<div class="date-start">
<label for="inputStartDate">Start Date</label>
<input type="date" id="inputStartDate">
</div>
<div class="date-end">
<label for="inputEndDate">End Date</label>
<input type="date" id="inputEndDate">
</div>
</div>
<div class="mpi-desc">
<label for="inputDescription">Description</label>
<textarea name="inputDescription" id="inputDescription"></textarea>
</div>
<div class="mpi-check-cont">
<label for="checkTitle">Technologies</label>
<div class="mpi-check">
<div class="check-left">
<div>
<label for="checkHtml" class="check-label">HTML
<input type="checkbox" id="checkHtml" name="checkHtml"check>
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="checkNode" class="check-label">Node Js
<input type="checkbox" id="checkNode" name="checkNode">
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="check-right">
<div>
<label for="checkCss" class="check-label">CSS
<input type="checkbox" id="checkCss" name="checkCss">
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="reactJs" class="check-label">React Js
<input type="checkbox" id="checkReact" name="checkReact">
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
</div>
<div>
<label>Upload Image</label>
<div class="mpi-image">
<label for="input-blog-image">
<div class="mpi-choose">Choose</div>
<div class="mpi-attach"><i class="fa-solid fa-paperclip"></i></div>
</label>
<input type="file" id="inputImage" hidden />
</div>
</div>
<div class="mpi-submit">
<button type="submit">Submit</button>
</div>
</form>
Thanks

The very first mistake is you have added different id than for
<label for="reactJs" class="check-label">React Js
<input type="checkbox" id="checkReact" name="checkReact">
<span class="checkmark"></span>
</label>
Here for value is reactJs but input id is checkReact
Second mistake is same as above
<label for="input-blog-image">
<div class="mpi-choose">Choose</div>
<div class="mpi-attach"><i class="fa-solid fa-paperclip"></i></div>
</label>
<input type="file" id="inputImage" hidden />
label for value is input-blog-image but input id is inputImage
Make those changes, will work fine.
let blogs = []
function addBlog(event) {
event.preventDefault()
let inputName = document.getElementById("inputProjectName").value
let inputContent = document.getElementById("inputDescription").value
let inputImage = document.getElementById("inputImage")
const projectDate = {
startDate: document.getElementById("inputStartDate").value,
endDate: document.getElementById("inputEndDate").value
}
image = URL.createObjectURL(image.files[0])
let cardIcons = {
html: document.querySelector('input[name="checkHtml"]').checked,
css: document.querySelector('input[name="checkCss"]').checked,
nodeJs: document.querySelector('input[name="checkNode"]').checked,
reactJs: document.querySelector('input[name="checkReact"]').checked
}
let blog = {
title: inputName,
date: projectDate,
content: inputContent,
icons: cardIcons,
image: inputImage
}
blogs.push(blog)
console.table(blogs)
}
mpi-title {
width: 100%;
margin: 50px 0px;
font-size: 30px;
text-align: center;
font-family: 'Lato', sans-serif !important;
font-weight: 700;
}
.mpi-form-container {
display: flex;
justify-content: center;
}
.mpi-form {
width: 540px;
display: flex;
justify-content: center;
}
.mpi-form label {
font-size: 25px;
font-weight: bold;
}
.mpi-form .mpi-name input,
.mpi-date input {
width: 100%;
height: 50px;
padding: 5px;
box-sizing: border-box;
font-size: 20px;
font-weight: 400;
padding-bottom: 5px;
margin-top: 5px;
margin-bottom: 20px;
border: 1px solid #c4c4c4;
border-radius: 8px;
box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}
.mpi-date {
flex-grow: 1;
display: flex;
gap: 10px;
}
.mpi-date .date-start {
flex: 50%;
}
.mpi-date .date-end {
flex: 50%;
}
[type="date"]::-webkit-datetime-edit {
opacity: 0;
}
[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0;
width: 100%;
}
.mpi-desc textarea {
width: 100%;
font-size: 20px;
font-weight: 400;
padding: 8px;
margin-top: 5px;
margin-bottom: 20px;
border: 1px solid #c4c4c4;
box-sizing: border-box;
border-radius: 8px;
height: 200px;
}
.mpi-check {
display: flex;
gap: 120px;
margin: 20px 0px;
}
.mpi-check label {
font-size: 20px;
}
.check-left {
display: flex;
flex-direction: column;
row-gap: 20px;
}
.check-right {
display: flex;
flex-direction: column;
row-gap: 20px;
}
.check-label {
display: block;
position: relative;
padding-left: 35px;
color: #514a4a;
margin-bottom: 12px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.check-label input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: white;
border-radius: 5px;
box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}
.check-label:hover input~.checkmark {
background-color: #ccc;
}
.check-label input:checked~.checkmark {
background-color: #2196F3;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.check-label input:checked~.checkmark:after {
display: block;
}
.check-label .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.mpi-image {
overflow: hidden;
height: 50px;
width: 100%;
font-size: 20px;
font-weight: 400;
box-sizing: border-box;
margin-top: 5px;
margin-bottom: 20px;
background: #f4f3f3;
border: 1px solid #c4c4c4;
border-radius: 8px;
cursor: pointer;
padding-right: 8px;
box-shadow: 0 10px 10px rgb(0 0 0 / 26%);
}
.mpi-image label {
width: 100%;
height: 50px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
}
.mpi-choose {
margin-top: -2px;
border-radius: 8px;
align-items: center;
padding: 13px 10px 13px 10px;
background-color: #e4e4e4;
color: #b2abab;
}
.mpi-attach {
padding-right: 10px;
}
.mpi-submit button {
margin-top: 30px;
float: right;
padding: 10px 30px;
border: none;
border-radius: 25px;
background-color: var(--btn);
color: white;
font-size: 15px;
font-weight: bold;
cursor: pointer;
margin-bottom: 110px;
}
.mpi-submit button:hover {
background-color: var(--btn-hover)
}
<form onsubmit="addBlog(event)">
<div class="mpi-name">
<label for="inputProjectName">Project Name</label>
<input type="text" id="inputProjectName">
</div>
<div class="mpi-date">
<div class="date-start">
<label for="inputStartDate">Start Date</label>
<input type="date" id="inputStartDate">
</div>
<div class="date-end">
<label for="inputEndDate">End Date</label>
<input type="date" id="inputEndDate">
</div>
</div>
<div class="mpi-desc">
<label for="inputDescription">Description</label>
<textarea name="inputDescription" id="inputDescription"></textarea>
</div>
<div class="mpi-check-cont">
<label for="checkTitle">Technologies</label>
<div class="mpi-check">
<div class="check-left">
<div>
<label for="checkHtml" class="check-label">HTML
<input type="checkbox" id="checkHtml" name="checkHtml"check>
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="checkNode" class="check-label">Node Js
<input type="checkbox" id="checkNode" name="checkNode">
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="check-right">
<div>
<label for="checkCss" class="check-label">CSS
<input type="checkbox" id="checkCss" name="checkCss">
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="reactJs" class="check-label">React Js
<input type="checkbox" id="reactJs" name="checkReact">
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
</div>
<div>
<label>Upload Image</label>
<div class="mpi-image">
<label for="input-blog-image">
<div class="mpi-choose">Choose</div>
<div class="mpi-attach"><i class="fa-solid fa-paperclip"></i></div>
</label>
<input type="file" id="input-blog-image" hidden />
</div>
</div>
<div class="mpi-submit">
<button type="submit">Submit</button>
</div>
</form>

The problem is the wrong value for the for attribute on two label elements. These are:
<label for="reactJs" class="check-label">
<label for="input-blog-image">
And the correct values would be:
<label for="checkReact" class="check-label">
<label for="inputImage">

align content from pseudo elements horizontally and vertically

I have the following css radio buttons but they don't align right.
I'd like to know how to properly horizontally and vertically align the smaller circle in the bigger circle.
.container {
position: absolute;
z-index: 10;
display: -ms-flexbox;
display: flex;
align-items: center;
left: 1.25rem!important;
}
.radio-group__fieldset {
border: none;
padding: 0;
}
.radio-group__options__container {
display: flex;
}
.radio__container {
margin-bottom: 0;
position: relative;
}
.radio__container input[type=radio] {
position: absolute;
cursor: pointer;
left: 0;
top: 0;
z-index: 1;
margin: 0;
zoom: 1;
opacity: 0;
}
.radio__container input[type=radio]:checked+label::after {
opacity: 1;
}
.radio__container label {
position: relative;
font-weight: 400;
color: inherit;
display: -ms-flexbox;
display: flex;
align-items: center;
font-size: 1.25rem;
}
.radio__container label::before {
content: "";
border: 3px solid #0065bd;
border-radius: 50%;
}
.radio__container label::after {
content: "";
position: absolute;
background-color: #0065bd;
border: none;
text-align: center;
border-radius: 50%;
opacity: 0;
}
.radio__inline label {
margin-right: 0.625rem;
}
.radio__container.radio__inline label .radio__content {
margin-left: 0.625rem;
}
.radio__container.radio__small input[type=radio],
.radio__container.radio__small label::after,
.radio__container.radio__small label::before {
width: 13px;
height: 13px;
}
.radio__container.radio__small label::before {
border-width: 2px;
border-radius: 50%;
}
.radio__container.radio__small label:after {
transform: scale(0.8);
}
.radio__content {
display: inline-block;
vertical-align: middle;
position: relative;
top: 10%;
}
<div class="container">
<fieldset class="radio-group__fieldset undefined">
<div class="radio-group__options__container pan-zoom-tree__dependency-filter">
<div class="radio__container radio__small radio__inline">
<input id="depndency-view-0" name="depndency-view" type="radio" value="Activities" checked="">
<label for="depndency-view-0">
<div class="radio__content">Activities</div>
</label>
</div>
<div class="radio__container radio__small radio__inline">
<input id="depndency-view-1" name="depndency-view" type="radio" value="Suppliers">
<label for="depndency-view-1">
<div class="radio__content">Suppliers</div>
</label>
</div>
</div>
</fieldset>
</div>

You can make as very easy like this:
input {
display: none;
}
label {
display: flex;
position: relative;
padding-left: 30px;
align-items: center;
line-height: 30px;
}
label::before {
content: '';
position: absolute;
left: 0;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid blue;
}
input#r1:checked ~ #l1::before {
background: radial-gradient(blue 0%, blue 40%, transparent 50%, transparent 100%);
}
input#r2:checked ~ #l2::before {
background: radial-gradient(blue 0%, blue 40%, transparent 50%, transparent 100%);
}
<input type="radio" id="r1" name="inp">
<input type="radio" id="r2" name="inp">
<label for="r1" id="l1">Radio1</label>
<label for="r2" id="l2">Radio2</label>
This is #TemaniAfif's more simplified way instead of radial-gradient background.
input {
display: none;
}
label {
display: flex;
position: relative;
padding-left: 30px;
align-items: center;
line-height: 30px;
}
label::before {
content: '';
position: absolute;
left: 0;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid blue;
padding: 3px;
box-sizing:border-box;
}
input#r1:checked ~ #l1::before,
input#r2:checked ~ #l2::before{
background:blue content-box;
}
<input type="radio" id="r1" name="inp">
<input type="radio" id="r2" name="inp">
<label for="r1" id="l1">Radio1</label>
<label for="r2" id="l2">Radio2</label>

You can try modifying this rule as below:
.radio__container label::after {
content: "";
position: absolute;
background-color: #0065bd;
border: none;
border-radius: 50%;
opacity: 0;
left: 2px; /*This is the modification */
}
Snippet:
.container {
position: absolute;
z-index: 10;
display: -ms-flexbox;
display: flex;
align-items: center;
left: 1.25rem!important;
}
.radio-group__fieldset {
border: none;
padding: 0;
}
.radio-group__options__container {
display: flex;
}
.radio__container {
margin-bottom: 0;
position: relative;
}
.radio__container input[type=radio] {
position: absolute;
cursor: pointer;
left: 0;
top: 0;
z-index: 1;
margin: 0;
zoom: 1;
opacity: 0;
}
.radio__container input[type=radio]:checked+label::after {
opacity: 1;
}
.radio__container label {
position: relative;
font-weight: 400;
color: inherit;
display: -ms-flexbox;
display: flex;
align-items: center;
font-size: 1.25rem;
}
.radio__container label::before {
content: "";
border: 3px solid #0065bd;
border-radius: 50%;
}
.radio__container label::after {
content: "";
position: absolute;
background-color: #0065bd;
border: none;
text-align: center;
border-radius: 50%;
opacity: 0;
left:2px;
}
.radio__inline label {
margin-right: 0.625rem;
}
.radio__container.radio__inline label .radio__content {
margin-left: 0.625rem;
}
.radio__container.radio__small input[type=radio],
.radio__container.radio__small label::after,
.radio__container.radio__small label::before {
width: 13px;
height: 13px;
}
.radio__container.radio__small label::before {
border-width: 2px;
border-radius: 50%;
}
.radio__container.radio__small label:after {
transform: scale(0.8);
}
.radio__content {
display: inline-block;
vertical-align: middle;
position: relative;
top: 10%;
}
<div class="container">
<fieldset class="radio-group__fieldset undefined">
<div class="radio-group__options__container pan-zoom-tree__dependency-filter">
<div class="radio__container radio__small radio__inline">
<input id="depndency-view-0" name="depndency-view" type="radio" value="Activities" checked="">
<label for="depndency-view-0">
<div class="radio__content">Activities</div>
</label>
</div>
<div class="radio__container radio__small radio__inline">
<input id="depndency-view-1" name="depndency-view" type="radio" value="Suppliers">
<label for="depndency-view-1">
<div class="radio__content">Suppliers</div>
</label>
</div>
</div>
</fieldset>
</div>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body style="height:900px">
<div class="container-fluid mt-3">
<form>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customRadio1" name="customRadio2">
<label class="custom-control-label" for="customRadio1">RadioButton</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customRadio2" name="customRadio2">
<label class="custom-control-label" for="customRadio2">RadioButton</label>
</div>
</body>
</html>

Trigger display using getElementsByClassName

I want the "Dont have an account?" line to trigger the display of .registrybox class when clicked. I have written down some script and it does not function. Script specifies that when Dont have an account? is clicked, .loginbox should disappear and be replaced w/ the .registrybox class code.
Those CSS display: none and display: block are written beforehand.
function displayRegistry() {
document.getElementsByClassName('.registrybox').style.display = "block";
document.getElementsByClassName('.loginbox').style.display = "none";
}
.loginbox {
width: 320px;
height: 420px;
background-color: ;
color: #fff;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
padding: 50px 20px;
display: block;
}
}
h1 {
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
}
.loginbox p {
margin: 0;
padding: 0;
font-weight: bold;
}
.loginbox input {
width: 100%;
margin-bottom: 20px;
}
.loginbox input[type="text"],
[type="password"] {
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
height: 40px;
color: #fff;
font-size: 16px;
}
.loginbox input[type="submit"] {
border: none;
outline: 0;
height: 40px;
background: #fb2525;
color: #fff;
font-size: 18px;
border-radius: 20px;
}
.loginbox input[type="submit"]:hover {
cursor: pointer;
background: red;
color: #000;
}
.loginbox a {
text-decoration: none;
color: darkgrey;
font-size: 15px;
line-height: 20px;
}
.loginbox a:hover {
color: red;
}
.registrybox {
width: 320px;
height: 420px;
color: #fff;
top: 10%;
left: 20%;
position: absolute;
transform: trnaslate(-50%, -50%);
}
.registrybox p {
font-weight: bold;
margin: 0;
padding: 0;
}
.registrybox input {
width: 100%;
margin-bottom: 20px;
}
.registrybox input[type="text"],
[type="password"] {
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
height: 40px;
color: #fff;
font-size: 16px;
}
.registrybox input[type="submit"] {
border: none;
outline: 0;
height: 40px;
color: #fff;
background: #fb2525;
font-size: 18px;
border-radius: 20px;
}
.registrybox input[type="submit"]:hover {
cursor: pointer;
background: red;
color: #000;
}
.registrybox a {
text-decoration: none;
color: darkgrey;
line-height: 20px;
font-size: 15px;
}
.registrybox {
display: none;
}
select {
padding: 10px;
border: none;
border-radius: 10px;
}
<div class="loginbox">
<h1>Login Here</h1>
<form>
<p>Username</p>
<input type="text" name="" placeholder="Enter Username">
<p>Password</p>
<input type="password" name="" placeholder="Enter Password">
<input type="submit" name="" value="Login">
Forgot password?<br>
Dont have an account?
</form>
</div>
<div class="registrybox">
<h1>Registration</h1>
<form>
<p>Username</p>
<input type="text" placeholder="Enter Username">
<p>E-mail</p>
<input type="text" placeholder="Enter E-mail">
<p>Password</p>
<input type="password" placeholder="Enter password">
<p>Repeat Password</p>
<input type="password" placeholder="Confirm password">
<input type="submit" value="Sign up">
<a hred="#">Already registered?</a>
<select name="dobmonth">
<option>month</option>
<option value="january">January</option>
</select>
<select name="dobyear">
<option>Year</option>
<option value="2000">2006</option>
<option value="2000">2005</option>
<option value="2000">2004</option>
<option value="2000">2003</option>
<option value="2000">2002</option>
<option value="2000">2001</option>
<option value="2000">2000</option>
<option value="2000">1999</option>
</select>
</form>
</div>

Actually getElementsByClassName() returns an array-like object with matched class name, so you will need to get the element by using [0]...Also you don't need to use . period when using getElementsByClassName()
function displayRegistry() {
document.getElementsByClassName('registrybox')[0].style.display = "block";
document.getElementsByClassName('loginbox')[0].style.display = "none";
}
function displayLogin() {
document.getElementsByClassName('registrybox')[0].style.display = "none";
document.getElementsByClassName('loginbox')[0].style.display = "block";
}
.loginbox {
width: 320px;
height: 420px;
background-color: ;
color: #fff;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
padding: 50px 20px;
display: block;
}
}
h1 {
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
}
.loginbox p {
margin: 0;
padding: 0;
font-weight: bold;
}
.loginbox input {
width: 100%;
margin-bottom: 20px;
}
.loginbox input[type="text"],
[type="password"] {
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
height: 40px;
color: #fff;
font-size: 16px;
}
.loginbox input[type="submit"] {
border: none;
outline: 0;
height: 40px;
background: #fb2525;
color: #fff;
font-size: 18px;
border-radius: 20px;
}
.loginbox input[type="submit"]:hover {
cursor: pointer;
background: red;
color: #000;
}
.loginbox a {
text-decoration: none;
color: darkgrey;
font-size: 15px;
line-height: 20px;
}
.loginbox a:hover {
color: red;
}
.registrybox {
width: 320px;
height: 420px;
color: #fff;
top: 10%;
left: 20%;
position: absolute;
transform: trnaslate(-50%, -50%);
}
.registrybox p {
font-weight: bold;
margin: 0;
padding: 0;
}
.registrybox input {
width: 100%;
margin-bottom: 20px;
}
.registrybox input[type="text"],
[type="password"] {
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
height: 40px;
color: #fff;
font-size: 16px;
}
.registrybox input[type="submit"] {
border: none;
outline: 0;
height: 40px;
color: #fff;
background: #fb2525;
font-size: 18px;
border-radius: 20px;
}
.registrybox input[type="submit"]:hover {
cursor: pointer;
background: red;
color: #000;
}
.registrybox a {
text-decoration: none;
color: darkgrey;
line-height: 20px;
font-size: 15px;
}
.registrybox {
display: none;
}
select {
padding: 10px;
border: none;
border-radius: 10px;
}
<div class="loginbox">
<h1>Login Here</h1>
<form>
<p>Username</p>
<input type="text" name="" placeholder="Enter Username">
<p>Password</p>
<input type="password" name="" placeholder="Enter Password">
<input type="submit" name="" value="Login">
Forgot password?<br>
Dont have an account?
</form>
</div>
<div class="registrybox">
<h1>Registration</h1>
<form>
<p>Username</p>
<input type="text" placeholder="Enter Username">
<p>E-mail</p>
<input type="text" placeholder="Enter E-mail">
<p>Password</p>
<input type="password" placeholder="Enter password">
<p>Repeat Password</p>
<input type="password" placeholder="Confirm password">
<input type="submit" value="Sign up">
<a hred="#" onclick="displayLogin()">Already registered?</a>
<select name="dobmonth">
<option>month</option>
<option value="january">January</option>
</select>
<select name="dobyear">
<option>Year</option>
<option value="2000">2006</option>
<option value="2000">2005</option>
<option value="2000">2004</option>
<option value="2000">2003</option>
<option value="2000">2002</option>
<option value="2000">2001</option>
<option value="2000">2000</option>
<option value="2000">1999</option>
</select>
</form>
</div>
Or you can use querySelector...
function displayRegistry() {
document.querySelector('.registrybox').style.display = "block";
document.querySelector('.loginbox').style.display = "none";
}
.loginbox {
width: 320px;
height: 420px;
background-color: ;
color: #fff;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
padding: 50px 20px;
display: block;
}
}
h1 {
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
}
.loginbox p {
margin: 0;
padding: 0;
font-weight: bold;
}
.loginbox input {
width: 100%;
margin-bottom: 20px;
}
.loginbox input[type="text"],
[type="password"] {
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
height: 40px;
color: #fff;
font-size: 16px;
}
.loginbox input[type="submit"] {
border: none;
outline: 0;
height: 40px;
background: #fb2525;
color: #fff;
font-size: 18px;
border-radius: 20px;
}
.loginbox input[type="submit"]:hover {
cursor: pointer;
background: red;
color: #000;
}
.loginbox a {
text-decoration: none;
color: darkgrey;
font-size: 15px;
line-height: 20px;
}
.loginbox a:hover {
color: red;
}
.registrybox {
width: 320px;
height: 420px;
color: #fff;
top: 10%;
left: 20%;
position: absolute;
transform: trnaslate(-50%, -50%);
}
.registrybox p {
font-weight: bold;
margin: 0;
padding: 0;
}
.registrybox input {
width: 100%;
margin-bottom: 20px;
}
.registrybox input[type="text"],
[type="password"] {
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
height: 40px;
color: #fff;
font-size: 16px;
}
.registrybox input[type="submit"] {
border: none;
outline: 0;
height: 40px;
color: #fff;
background: #fb2525;
font-size: 18px;
border-radius: 20px;
}
.registrybox input[type="submit"]:hover {
cursor: pointer;
background: red;
color: #000;
}
.registrybox a {
text-decoration: none;
color: darkgrey;
line-height: 20px;
font-size: 15px;
}
.registrybox {
display: none;
}
select {
padding: 10px;
border: none;
border-radius: 10px;
}
<div class="loginbox">
<h1>Login Here</h1>
<form>
<p>Username</p>
<input type="text" name="" placeholder="Enter Username">
<p>Password</p>
<input type="password" name="" placeholder="Enter Password">
<input type="submit" name="" value="Login">
Forgot password?<br>
Dont have an account?
</form>
</div>
<div class="registrybox">
<h1>Registration</h1>
<form>
<p>Username</p>
<input type="text" placeholder="Enter Username">
<p>E-mail</p>
<input type="text" placeholder="Enter E-mail">
<p>Password</p>
<input type="password" placeholder="Enter password">
<p>Repeat Password</p>
<input type="password" placeholder="Confirm password">
<input type="submit" value="Sign up">
<a hred="#">Already registered?</a>
<select name="dobmonth">
<option>month</option>
<option value="january">January</option>
</select>
<select name="dobyear">
<option>Year</option>
<option value="2000">2006</option>
<option value="2000">2005</option>
<option value="2000">2004</option>
<option value="2000">2003</option>
<option value="2000">2002</option>
<option value="2000">2001</option>
<option value="2000">2000</option>
<option value="2000">1999</option>
</select>
</form>
</div>

You have some mistakes in your JS code.
document.getElementsByClassName() requires only the class name. You are adding '.' in front of the classname. This wrong.
document.getElementsByClassName() returns an array of elements. In your case, you need to select first element from this array. So you need to use [0] to get the desired value
function displayRegistry() {
document.getElementsByClassName('registrybox')[0].style.display = "block";
document.getElementsByClassName('loginbox')[0].style.display = "none";
}
.loginbox {
width: 320px;
height: 420px;
background-color: ;
color: #fff;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
padding: 50px 20px;
display: block;
}
}
h1 {
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
}
.loginbox p {
margin: 0;
padding: 0;
font-weight: bold;
}
.loginbox input {
width: 100%;
margin-bottom: 20px;
}
.loginbox input[type="text"],
[type="password"] {
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
height: 40px;
color: #fff;
font-size: 16px;
}
.loginbox input[type="submit"] {
border: none;
outline: 0;
height: 40px;
background: #fb2525;
color: #fff;
font-size: 18px;
border-radius: 20px;
}
.loginbox input[type="submit"]:hover {
cursor: pointer;
background: red;
color: #000;
}
.loginbox a {
text-decoration: none;
color: darkgrey;
font-size: 15px;
line-height: 20px;
}
.loginbox a:hover {
color: red;
}
.registrybox {
width: 320px;
height: 420px;
color: #fff;
top: 10%;
left: 20%;
position: absolute;
transform: trnaslate(-50%, -50%);
}
.registrybox p {
font-weight: bold;
margin: 0;
padding: 0;
}
.registrybox input {
width: 100%;
margin-bottom: 20px;
}
.registrybox input[type="text"],
[type="password"] {
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
height: 40px;
color: #fff;
font-size: 16px;
}
.registrybox input[type="submit"] {
border: none;
outline: 0;
height: 40px;
color: #fff;
background: #fb2525;
font-size: 18px;
border-radius: 20px;
}
.registrybox input[type="submit"]:hover {
cursor: pointer;
background: red;
color: #000;
}
.registrybox a {
text-decoration: none;
color: darkgrey;
line-height: 20px;
font-size: 15px;
}
.registrybox {
display: none;
}
select {
padding: 10px;
border: none;
border-radius: 10px;
}
<div class="loginbox">
<h1>Login Here</h1>
<form>
<p>Username</p>
<input type="text" name="" placeholder="Enter Username">
<p>Password</p>
<input type="password" name="" placeholder="Enter Password">
<input type="submit" name="" value="Login">
Forgot password?<br>
Dont have an account?
</form>
</div>
<div class="registrybox">
<h1>Registration</h1>
<form>
<p>Username</p>
<input type="text" placeholder="Enter Username">
<p>E-mail</p>
<input type="text" placeholder="Enter E-mail">
<p>Password</p>
<input type="password" placeholder="Enter password">
<p>Repeat Password</p>
<input type="password" placeholder="Confirm password">
<input type="submit" value="Sign up">
<a hred="#">Already registered?</a>
<select name="dobmonth">
<option>month</option>
<option value="january">January</option>
</select>
<select name="dobyear">
<option>Year</option>
<option value="2000">2006</option>
<option value="2000">2005</option>
<option value="2000">2004</option>
<option value="2000">2003</option>
<option value="2000">2002</option>
<option value="2000">2001</option>
<option value="2000">2000</option>
<option value="2000">1999</option>
</select>
</form>
</div>

Try this.
function displayRegistry() {
document.getElementsByClassName('registrybox')[0].style.display = "block";
document.getElementsByClassName('loginbox')[0].style.display = "none";
}
.loginbox {
width: 320px;
height: 420px;
background-color: ;
color: #fff;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
padding: 50px 20px;
display: block;
}
}
h1 {
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
}
.loginbox p {
margin: 0;
padding: 0;
font-weight: bold;
}
.loginbox input {
width: 100%;
margin-bottom: 20px;
}
.loginbox input[type="text"],
[type="password"] {
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
height: 40px;
color: #fff;
font-size: 16px;
}
.loginbox input[type="submit"] {
border: none;
outline: 0;
height: 40px;
background: #fb2525;
color: #fff;
font-size: 18px;
border-radius: 20px;
}
.loginbox input[type="submit"]:hover {
cursor: pointer;
background: red;
color: #000;
}
.loginbox a {
text-decoration: none;
color: darkgrey;
font-size: 15px;
line-height: 20px;
}
.loginbox a:hover {
color: red;
}
.registrybox {
width: 320px;
height: 420px;
color: #fff;
top: 10%;
left: 20%;
position: absolute;
transform: trnaslate(-50%, -50%);
}
.registrybox p {
font-weight: bold;
margin: 0;
padding: 0;
}
.registrybox input {
width: 100%;
margin-bottom: 20px;
}
.registrybox input[type="text"],
[type="password"] {
border: none;
border-bottom: 1px solid #fff;
outline: none;
background: transparent;
height: 40px;
color: #fff;
font-size: 16px;
}
.registrybox input[type="submit"] {
border: none;
outline: 0;
height: 40px;
color: #fff;
background: #fb2525;
font-size: 18px;
border-radius: 20px;
}
.registrybox input[type="submit"]:hover {
cursor: pointer;
background: red;
color: #000;
}
.registrybox a {
text-decoration: none;
color: darkgrey;
line-height: 20px;
font-size: 15px;
}
.registrybox {
display: none;
}
select {
padding: 10px;
border: none;
border-radius: 10px;
}
<div class="loginbox">
<h1>Login Here</h1>
<form>
<p>Username</p>
<input type="text" name="" placeholder="Enter Username">
<p>Password</p>
<input type="password" name="" placeholder="Enter Password">
<input type="submit" name="" value="Login">
Forgot password?<br>
Dont have an account?
</form>
</div>
<div class="registrybox">
<h1>Registration</h1>
<form>
<p>Username</p>
<input type="text" placeholder="Enter Username">
<p>E-mail</p>
<input type="text" placeholder="Enter E-mail">
<p>Password</p>
<input type="password" placeholder="Enter password">
<p>Repeat Password</p>
<input type="password" placeholder="Confirm password">
<input type="submit" value="Sign up">
<a hred="#">Already registered?</a>
<select name="dobmonth">
<option>month</option>
<option value="january">January</option>
</select>
<select name="dobyear">
<option>Year</option>
<option value="2000">2006</option>
<option value="2000">2005</option>
<option value="2000">2004</option>
<option value="2000">2003</option>
<option value="2000">2002</option>
<option value="2000">2001</option>
<option value="2000">2000</option>
<option value="2000">1999</option>
</select>
</form>
</div>

If you want to alternative with jquery u can use this i can't do it here because i can't add jquery
Fiddle Example

Fixing the position of apply button in Multi-Select Checkbox

I have designed multi-select checkbox by using some code snippets.
However, I don't want user to scroll down to the list to select the apply button.
In the Following Snapshot, There is no apply button unless user scroll bottom of the list.
What I am trying to achieve is to show the scroll bar between Select Measure and Apply Button.
JsFiddle
var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
function closebox() {
var checkboxes = document.getElementById("checkboxes");
$(checkboxes).delay(5000).fadeIn();
checkboxes.style.display = "none";
}
function sleep(miliseconds) {
var currentTime = new Date().getTime();
while (currentTime + miliseconds >= new Date().getTime()) {}
}
function getvalues() {
var str = '';
var checks = document.getElementsByClassName('checks');
for (i = 0; i < checks.length; i++) {
if (checks[i].checked === true) {
str += checks[i].value + " ";
}
}
alert(str);
}
function getvalue() {
var str = '';
var checks = document.getElementsByClassName('checks');
alert(checks[0].checked);
}
.multiselect {
width: 180px;
}
.selectBox {
/* position: relative; */
position: relative
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
line-height: 0px;
height: 100px;
padding: 0px;
border: 1px #dadada solid;
overflow-y: scroll;
overflow-x: hidden;
}
#checkboxes::-webkit-scrollbar {
width: 6px;
}
#checkboxes::-webkit-scrollbar-thumb {
background-color: grey;
outline: 1px solid slategrey;
border-radius: 4px;
}
select {
background-color: #e6e6e6;
border: thin solid #e6e6e6;
border-radius: 4px;
display: inline-block;
font: inherit;
line-height: 1em;
padding: 0.5em 3.5em 0.5em 1em;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
width: 100%;
cursor: pointer;
outline: 0;
color: #7b7b7b;
}
.selectBox:after {
content: "\f13a";
font-family: "FontAwesome";
padding: 10px 0px 10px 2px;
position: absolute;
right: 10px;
top: 0;
color: #7b7b7b;
font-size: 15px;
z-index: 1;
text-align: center;
width: 10%;
height: 100%;
pointer-events: none;
box-sizing: border-box;
}
label {
cursor: pointer;
color: #666;
display: block;
margin: 0px 4px 2px -29px;
padding: 3px;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]+.label-text:before {
content: "\f096";
font-family: "FontAwesome";
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
width: 1em;
display: inline-block;
margin-right: 5px;
}
input[type="checkbox"]:checked+.label-text:before {
content: "\f14a";
color: #06a3e9;
}
input[type="checkbox"]:disabled+.label-text {
color: #aaa;
}
input[type="checkbox"]:disabled+.label-text:before {
content: "\f0c8";
color: #ccc;
}
.submit {
background: #ff8080;
color: #008080;
padding: 10px 5px 5px;
border: 0;
width: 100%;
font-size: 14px;
cursor: pointer;
text-align: center;
}
ul {
padding: 0px 0px 2px 34px;
}
li {
list-style: none;
padding: 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select class="round">
<option>Select Measure</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<ul>
<li> <label> <input type="checkbox" name="" class="checks" value="1" onchange="closebox()"><span class="label-text">Item One</span></label></li>
<li><label> <input type="checkbox" name="" class="checks" value="2"><span class="label-text">Item Two</span></label></li>
<li><label> <input type="checkbox" name="" class="checks" value="3" ><span class="label-text">Item Three</span></label></li>
<li><label> <input type="checkbox" name="" class="checks" value="4" ><span class="label-text">Item Four</span></label></li>
<li> <label> <input type="checkbox" name="" class="checks" value="5" ><span class="label-text">Item Five</span></label></li>
<li><label> <input type="checkbox" name="" class="checks" value="6" ><span class="label-text">Item Six</span></label></li>
</ul>
<label> <input type="submit" class="submit round" value="APPLY"></label>
</div>
</div>
</form>
<button onclick="getvalues()"> Get Values </button>
/

You can move the label out of the checkboxes, so when you scroll - you will scroll only the checkboxes:
var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes-container");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
function closebox() {
var checkboxes = document.getElementById("checkboxes-container");
$(checkboxes).delay(5000).fadeIn();
checkboxes.style.display = "none";
}
function sleep(miliseconds) {
var currentTime = new Date().getTime();
while (currentTime + miliseconds >= new Date().getTime()) {}
}
function getvalues() {
var str = '';
var checks = document.getElementsByClassName('checks');
for (i = 0; i < checks.length; i++) {
if (checks[i].checked === true) {
str += checks[i].value + " ";
}
}
alert(str);
}
function getvalue() {
var str = '';
var checks = document.getElementsByClassName('checks');
alert(checks[0].checked);
}
.multiselect {
width: 180px;
}
.selectBox {
/* position: relative; */
position: relative
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes-container {
display: none;
height: 120px;
}
#checkboxes {
line-height: 0px;
height: 80px;
padding: 0px;
border: 1px #dadada solid;
overflow-y: scroll;
overflow-x: hidden;
}
#checkboxes::-webkit-scrollbar {
width: 6px;
}
#checkboxes::-webkit-scrollbar-thumb {
background-color: grey;
outline: 1px solid slategrey;
border-radius: 4px;
}
select {
background-color: #e6e6e6;
border: thin solid #e6e6e6;
border-radius: 4px;
display: inline-block;
font: inherit;
line-height: 1em;
padding: 0.5em 3.5em 0.5em 1em;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
width: 100%;
cursor: pointer;
outline: 0;
color: #7b7b7b;
}
.selectBox:after {
content: "\f13a";
font-family: "FontAwesome";
padding: 10px 0px 10px 2px;
position: absolute;
right: 10px;
top: 0;
color: #7b7b7b;
font-size: 15px;
z-index: 1;
text-align: center;
width: 10%;
height: 100%;
pointer-events: none;
box-sizing: border-box;
}
label {
cursor: pointer;
color: #666;
display: block;
margin: 0px 4px 2px -29px;
padding: 3px;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]+.label-text:before {
content: "\f096";
font-family: "FontAwesome";
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
width: 1em;
display: inline-block;
margin-right: 5px;
}
input[type="checkbox"]:checked+.label-text:before {
content: "\f14a";
color: #06a3e9;
}
input[type="checkbox"]:disabled+.label-text {
color: #aaa;
}
input[type="checkbox"]:disabled+.label-text:before {
content: "\f0c8";
color: #ccc;
}
.submit {
background: #ff8080;
color: #008080;
padding: 10px 5px 5px;
border: 0;
width: 100%;
font-size: 14px;
cursor: pointer;
text-align: center;
}
ul {
padding: 0px 0px 2px 34px;
}
li {
list-style: none;
padding: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select class="round">
<option>Select Measure</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes-container">
<div id="checkboxes">
<ul>
<li> <label> <input type="checkbox" name="" class="checks" value="1" onchange="closebox()"><span class="label-text">Item One</span></label></li>
<li><label> <input type="checkbox" name="" class="checks" value="2"><span class="label-text">Item Two</span></label></li>
<li><label> <input type="checkbox" name="" class="checks" value="3" ><span class="label-text">Item Three</span></label></li>
<li><label> <input type="checkbox" name="" class="checks" value="4" ><span class="label-text">Item Four</span></label></li>
<li> <label> <input type="checkbox" name="" class="checks" value="5" ><span class="label-text">Item Five</span></label></li>
<li><label> <input type="checkbox" name="" class="checks" value="6" ><span class="label-text">Item Six</span></label></li>
</ul>
</div>
<label> <input type="submit" class="submit round" value="APPLY"></label>
</div>
</div>
</form>
<button onclick="getvalues()"> Get Values </button>

Aligning div inside a div with Label?

I have below html code.
HTML
<label for="payment" class="headerAtt">Pay:</label>
<div class="chckValueWrap">
<div class="left">
<input type="checkbox" name="chk_group" value="value1" />Visa<br />
<input type="checkbox" name="chk_group" value="value2" />Master Card <br />
<input type="checkbox" name="chk_group" value="value3" />American Express<br />
<input type="checkbox" name="chk_group" value="value3" />Care Credit<br />
<input type="checkbox" name="chk_group" value="value1" />Discover</div>
<div class="right"><input type="checkbox" name="chk_group" value="value2" />Cash ONLY<br />
<input type="checkbox" name="chk_group" value="value3" />Personal Check<br />
<input type="checkbox" name="chk_group" value="value3" />PayPal <br />
<input type="checkbox" name="chk_group" value="value3" />No Cash Accepted<br />
<input type="checkbox" name="chk_group" value="value3" />Others
</div>
</div>
CSS:
.headerAtt{
padding-right: 50px;
padding-bottom: 10px;
min-width: 250px;
display: inline-block;
color: #999999;
font-family: Verdana;
font-size: 13px;
font-weight: bold;
}
.chckValueWrap{
background-color: #FFFFFF;
border: 1px solid #C0C0C0;
padding-bottom: 10px;
font-size: 1.13em;
width: 80%;
margin: auto;
padding: 1%;
height: 100px;
}
.left{
width: 40%;
height: 100px;
float: left;
}
.right {
width: 40%;
height: 100px;
float: right;
}
Here everything is working fine except the label. how can i align align label and div horizontally as a single Line?
Thanks!

Try changing margin of .chckValueWrap to -23px 0 0 42px;
.headerAtt{
padding-right: 50px;
padding-bottom: 10px;
min-width: 250px;
display: inline-block;
color: #999999;
font-family: Verdana;
font-size: 13px;
font-weight: bold;
}
.chckValueWrap{
background-color: #FFFFFF;
border: 1px solid #C0C0C0;
padding-bottom: 10px;
font-size: 1.13em;
width: 80%;
margin: -23px 0 0 42px;
padding: 1%;
height: 100px;
}
.left{
width: 40%;
height: 100px;
float: left;
}
.right {
width: 40%;
height: 100px;
float: right;
}

Check this
What I did is:
Put the label and div inside an outer div with class outerWrap. And gave that div padding.
Removed padding from chckValueWrap class css.
.outerWrap {
background-color: #FFFFFF;
padding-bottom: 10px;
font-size: 1.13em;
width: 80%;
margin: auto;
padding: 1%;
height: 100px;
}
.chckValueWrap {
background-color: #FFFFFF;
border: 1px solid #C0C0C0;
padding-bottom: 10px;
font-size: 1.13em;
width: 80%;
height: 100px;
}
Hope it helps.

You are giving 80% to the outer width and giving 40% each to right and left div inside it. Width attribute represents the content width only. So giving 40% to both will collide their border and both will not come correct. You need to slightly decrease width of one while playing with float.You need make it work with following CSS changes:
.headerAtt{
padding-right: 50px;
padding-bottom: 10px;
min-width: 250px;
display: inline-block;
color: #999999;
font-family: Verdana;
font-size: 13px;
font-weight: bold;
float:left;
}
.left{
width: 39%;
height: 100px;
float: left;
}
.right {
width: 40%;
height: 100px;
float: right;
}
Fiddle: http://jsfiddle.net/9E4q7/4/

Try this: Demo at: http://jsfiddle.net/7EPRJ/2/
Your HTML remain the same. Just some tweaks to the css
Your label width may be the issue.
.headerAtt {
padding-right: 5px;
padding-bottom: 10px;
min-width: 20px;
display: inline-block;
color: #999999;
font-family: Verdana;
font-size: 13px;
font-weight: bold;
float:left;
}
.chckValueWrap {
background-color: #FFFFFF;
border: 1px solid #C0C0C0;
padding-bottom: 10px;
font-size: 1.13em;
width: 80%;
margin: auto;
padding: 1%;
height: 100px;
float:left;
overflow:hidden;
}
.left {
width: 40%;
height: 100px;
float: left;
}
.right {
width: 40%;
height: 100px;
float: right;
}

We Keep Coding

JavaScript is the programming language of the Web.

Multiple fill colors in star rating survey - javascript

Related

Form input checkbox and file type isn't functioning

align content from pseudo elements horizontally and vertically

Trigger display using getElementsByClassName

Fixing the position of apply button in Multi-Select Checkbox

Aligning div inside a div with Label?

Categories

Resources