HTML-CSS: Custom checkbox
HTML-CSS : Exercise-1 with Solution
Using HTML, CSS create a styled checkbox with animation on state change.
- Use an <svg> element to create the check <symbol> and insert it via the <use> element to create a reusable SVG icon.
- Create a .checkbox-container and use flexbox to create the appropriate layout for the checkboxes.
- Hide the <input> element and use the label associated with it to display a checkbox and the provided text.
- Use stroke-dashoffset to animate the check symbol on state change.
- Use transform: scale(0.9) via a CSS animation to create a zoom animation effect.
HTML Code:
<!--License: https://bit.ly/3GjrtVF-->
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Using HTML, CSS create a styled checkbox with animation on state change</title>
</head>
<body>
<div class="w3rcontainer"><strong>Preview:</strong>
<div class="checkbox-container">
<input class="checkbox-input" id="oranges" type="checkbox" />
<label class="checkbox" for="oranges">
<span>
<svg width="12px" height="10px">
<use xlink:href="#check"></use>
</svg>
</span>
<span>Oranges</span>
</label>
<input class="checkbox-input" id="bananas" type="checkbox" />
<label class="checkbox" for="bananas">
<span>
<svg width="12px" height="10px">
<use xlink:href="#check"></use>
</svg>
</span>
<span>Bananas</span>
</label>
</div>
</div>
</body>
</html>
CSS Code:
<style>
.w3rcontainer{
border: 1px solid #cccfdb;
border-radius: 2px;
}
.hover-underline-animation {
display: inline-block;
position: relative;
color: #0087ca;
}
.hover-underline-animation:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background-color: #0087ca;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
</style>
HTML-CSS Editor:
See the Pen html-css-practical-exercises by w3resource (@w3resource) on CodePen.
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
HTML-CSS: Tips of the Day
Two divs side by side - Fluid display
#sides{ margin:0; } #left{ float:left; width:75%; overflow:hidden; } #right{ float:left; width:25%; overflow:hidden; }
Ref: https://bit.ly/3EN8QKy
- New Content published on w3resource:
- HTML-CSS Practical: Exercises, Practice, Solution
- Java Regular Expression: Exercises, Practice, Solution
- Scala Programming Exercises, Practice, Solution
- Python Itertools exercises
- Python Numpy exercises
- Python GeoPy Package exercises
- Python Pandas exercises
- Python nltk exercises
- Python BeautifulSoup exercises
- Form Template
- Composer - PHP Package Manager
- PHPUnit - PHP Testing
- Laravel - PHP Framework
- Angular - JavaScript Framework
- Vue - JavaScript Framework
- Jest - JavaScript Testing Framework