Dropdown select menus are a common way to gather user input, but their default appearance can sometimes feel uninspiring. In this tutorial, we'll guide you through the process of creating custom select option styles using HTML, CSS, and JavaScript, allowing you to elevate the user experience of your forms.
Step 1: Setting Up the HTML Markup:
Begin by creating the HTML structure for your custom select option.
HTML Code
<!-- -------------------- HTML -------------------- -->
<div class="wrapper">
<div class="select">
<span id="select_text">
<i class="fa-brands fa-facebook"></i>
Facebook</span>
<i id="select_arrow" class="fa-solid fa-caret-down"></i>
</div>
<div class="option-list">
<div class="option">
<i class="fa-brands fa-facebook"></i>
<span>Facebook</span>
</div>
<div class="option">
<i class="fa-brands fa-youtube"></i>
<span>YouTube</span>
</div>
<div class="option">
<i class="fa-brands fa-linkedin"></i>
<span>Linkedin</span>
</div>
<div class="option">
<i class="fa-brands fa-instagram"></i>
<span>Instagram</span>
</div>
<div class="option">
<i class="fa-brands fa-twitter"></i>
<span>Twitter</span>
</div>
</div>
</div>
<span id="cursur"></span>
Step 2: Styling with CSS:
Create a separate CSS file (style.css) to style the custom select option. Define styles for the container, select box, and the selected value display.
CSS Code
/*-------------------- CSS --------------------*/
* {
font-family: sans-serif;
padding: 0;
margin: 0;
box-sizing: border-box;
}
:root{
--bg: #222429;
}
body {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: var(--bg);
}
.wrapper {
width: 300px;
position: relative;
color: #f5f5f5bb;
font-size: 20px;
}
.select {
width: 100%;
padding: 10px 30px;
border-radius: 8px;
display: flex;
justify-content: space-between;
cursor: pointer;
border: 1px solid #ffffff22;
background: #333740;
}
#select_text,
#select_arrow {
pointer-events: none;
}
#select_text i{
margin-right: 10px;
}
.option-list {
position: absolute;
width: 100%;
/* height: auto; */
top: 50px;
border-radius: 8px;
overflow: hidden;
display: none;
/* display: block; */
background: #333740;
border: 1px solid #ffffff22;
}
.option-list:hover{
cursor: none;
}
.option {
display: flex;
align-items: center;
padding: 10px 20px;
height: 55px;
transition: 0.5s;
}
.option:hover{
background: #222429;
}
.option i {
font-size: 16px;
margin: 5px;
width: 30px;
opacity: 0;
transition: 2s;
}
.option:hover i {
opacity: 1;
}
.option span {
transition: 0.5s;
}
.hide {
display: block;
}
.rotate {
transform: rotate(180deg);
}
/* cursor */
#cursur {
display: none;
font-size: 16px;
padding: 2px 5px 1px;
border-radius: 4px;
background: #454354;
color: white;
position: absolute;
pointer-events: none;
z-index: 1000;
transform: translate(-50%, -50%);
transition: opacity 0.5s;
}
Step 3: Adding JavaScript Interaction:
Create a JavaScript file (main.js) to handle the interaction with the custom select option. We'll update the displayed selected value when an option is chosen.
Java Script Code
//-------------------- Java Script --------------------//
let selects = document.querySelector(".select");
let select_text = document.getElementById("select_text");
let select_arrow = document.getElementById("select_arrow");
let options_item = document.querySelector(".option-list");
let option = document.querySelectorAll(".option")
let fa_brands = document.querySelectorAll(".fa-brands")
selects.addEventListener("click", () => {
options_item.classList.toggle("hide");
select_arrow.classList.toggle("rotate");
});
option.forEach(option => {
option.addEventListener("click", () => {
select_text.innerHTML = option.innerHTML;
options_item.classList.toggle("hide");
select_arrow.classList.toggle("rotate");
});
});
document.addEventListener('click', (event) => {
if (event.target !== selects) {
if (options_item.classList.contains('hide')) {
options_item.classList.remove("hide");
select_arrow.classList.remove("rotate");
}
}
})
// curser
let cursor = document.getElementById("cursur");
options_item.addEventListener("mousemove", (e) => {
cursor.style.top = e.pageY + "px";
cursor.style.left = e.pageX + "px";
cursor.style.display = "block"
});
options_item.addEventListener("mouseleave", (e) => {
cursor.style.display = "none"
});
option.forEach((options) => {
options.addEventListener("mouseenter", (e) => {
let selectedContent = options.querySelector(".fa-brands");
cursor.innerHTML = selectedContent.outerHTML;
});
});
Congratulations! You've successfully created custom select option styles using HTML, CSS, and JavaScript. This enhancement can significantly improve the user experience of your forms and add a touch of sophistication to your web application.
Feel free to customize the styles to match your website's design. You can also explore additional JavaScript features to further enhance the interactivity, such as adding animations or creating custom dropdowns.
By following this tutorial, you've gained a valuable skill in web development that can help you create more engaging and user-friendly interfaces. Implement these custom select option styles in your web forms to provide users with a more intuitive and visually appealing way to make selections.
0 Comments