Hey friends, today in this blog you'll learn how to create an Attractive Poll UI Design using HTML CSS & JavaScript. In the earlier blog, I have shared how to create Pure CSS Custom Radio or Select Buttons and now it's time to create a Pooling System in JavaScript.
You may have seen polls on Facebook, YouTube where the author posts a poll with some options, and user have to select one option from the mentioned options. You can undo your selection and in this blog, I'll show you the same poll design.
In this Poll UI Design, there is a content box with a header and some options. At first, there is only an option name with a light grey border and a radio circle on each option but when you select an option then the selected option border color will be changed into the body color, the radio circle color also changed and checked, and the total percent and the progress bar of each option also visible as you can see in the preview image.
You can copy the codes from the given boxes or download the code files from the given link but I recommend you download the source code files instead of copying codes. Click here to download code files.
You might like this:
Cookie Consent Box in JavaScript
Detect Internet Connection Status
Limit Input Character in JavaScript
CSS Custom Radio or Select Buttons
HTML CODE:
<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Poll UI Design | CodingNepal</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<header>Poll UI Design</header>
<div class="poll-area">
<input type="checkbox" name="poll" id="opt-1">
<input type="checkbox" name="poll" id="opt-2">
<input type="checkbox" name="poll" id="opt-3">
<input type="checkbox" name="poll" id="opt-4">
<label for="opt-1" class="opt-1">
<div class="row">
<div class="column">
<span class="circle"></span>
<span class="text">HTML</span>
</div>
<span class="percent">30%</span>
</div>
<div class="progress" style='--w:30;'></div>
</label>
<label for="opt-2" class="opt-2">
<div class="row">
<div class="column">
<span class="circle"></span>
<span class="text">Java</span>
</div>
<span class="percent">20%</span>
</div>
<div class="progress" style='--w:20;'></div>
</label>
<label for="opt-3" class="opt-3">
<div class="row">
<div class="column">
<span class="circle"></span>
<span class="text">Python</span>
</div>
<span class="percent">40%</span>
</div>
<div class="progress" style='--w:40;'></div>
</label>
<label for="opt-4" class="opt-4">
<div class="row">
<div class="column">
<span class="circle"></span>
<span class="text">jQuery</span>
</div>
<span class="percent">10%</span>
</div>
<div class="progress" style='--w:10;'></div>
</label>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS CODE
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #6665ee;
}
::selection{
color: #fff;
background: #6665ee;
}
.wrapper{
background: #fff;
border-radius: 15px;
padding: 25px;
max-width: 380px;
width: 100%;
box-shadow: 0px 5px 10px rgba(0,0,0,0.1);
}
.wrapper header{
font-size: 22px;
font-weight: 600;
}
.wrapper .poll-area{
margin: 20px 0 15px 0;
}
.poll-area label{
display: block;
margin-bottom: 10px;
border-radius: 5px;
padding: 8px 15px;
border: 2px solid #e6e6e6;
transition: all 0.2s ease;
}
.poll-area label:hover{
border-color: #ddd;
}
label.selected{
border-color: #6665ee!important;
}
label .row{
display: flex;
pointer-events: none;
justify-content: space-between;
}
label .row .column{
display: flex;
align-items: center;
}
label .row .circle{
height: 19px;
width: 19px;
display: block;
border: 2px solid #ccc;
border-radius: 50%;
margin-right: 10px;
position: relative;
}
label.selected .row .circle{
border-color: #6665ee;
}
label .row .circle::after{
content: "";
height: 11px;
width: 11px;
background: #6665ee;
border-radius: inherit;
position: absolute;
left: 2px;
top: 2px;
display: none;
}
.poll-area label:hover .row .circle::after{
display: block;
background: #e6e6e6;
}
label.selected .row .circle::after{
display: block;
background: #6665ee!important;
}
label .row span{
font-size: 16px;
font-weight: 500;
}
label .row .percent{
display: none;
}
label .progress{
height: 7px;
width: 100%;
position: relative;
background: #f0f0f0;
margin: 8px 0 3px 0;
border-radius: 30px;
display: none;
pointer-events: none;
}
label .progress:after{
position: absolute;
content: "";
height: 100%;
background: #ccc;
width: calc(1% * var(--w));
border-radius: inherit;
transition: all 0.2s ease;
}
label.selected .progress::after{
background: #6665ee;
}
label.selectall .progress,
label.selectall .row .percent{
display: block;
}
input[type="radio"],
input[type="checkbox"]{
display: none;
}
For JavaScript codes please go to this link - https://www.codingnepalweb.com/2021/04/poll-ui-design-using-html-css-javascript.html
Top comments (1)
Great tutorial! I appreciate how you broke down each step, making it easy to follow. The explanation of form validation is especially helpful, as it ensures user inputs are correct before submission. I am a student of Best International Schools in Bangalore. Would love to see more examples like this for other types of elements. Keep up the good work!