Building an idea using HTML CSS JS - Day 6

Today's day 6 Goal is to add style to buttons and improvements to code in my project backupcal.

HTML

How to include Checkbox input type in html?

1. Write the following code.

<input type="checkbox" onclick="functionname()">
Content
</input>

JavaScript

How to Hide and Unhide div using checkbox in JavaScript?

1. Implement if statement. Write the following code.

if (document.getElementById("idname").checked == true) 
{
document.getElementById("idname").style.display = "block";
}

CSS

how to add style to checkbox?

1. Use #idname to style a particular checkbox. Write the following code.

input[type="checkbox"]#myCheck
{
  position: absolute;
  width: 80px;
  height: 40px;
  appearance: none;
  background: #c6c6c6;
  border-radius: 20px;
}

How to get a slider round button on top of checkbox?

1. Write the following code.

input[type="checkbox"]#checkdaily:before {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background: #fafafa;
}

how to get transparent background color?

1. Write the following code.

backdrop-filter: blur(25px) saturate(180%);

My Code:

Conclusion

1. Checkbox input type in html.

2. Hide and Unhide div using checkbox in JavaScript.

3. Styling checkbox.

4. Slider round button on top of checkbox.

5. Transparent background color

Author: Dheeraj.y