Enhance User Experience with Custom Select Option Styles: HTML, CSS, and JavaScript Guide @rayen-code

Rayen
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.
Select An Option

Facebook

YouTube

Whatsapp

Google

GitHub


Step 1: Setting Up the HTML Markup:

Begin by creating the HTML structure for your custom select option.

HTML Code

<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drop Down Select Menu</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />

    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="wrapper">
    <div class="select">
        <span id="select_text">Select An Option</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>
            <p>Facebook</p>
        </div>
        <div class="option">
            <i class="fa-brands fa-youtube"></i>
            <p>YouTube</p>
        </div>
        <div class="option">
            <i class="fa-brands fa-square-whatsapp"></i>
            <p>Whatsapp</p>
        </div>
        <div class="option">
            <i class="fa-brands fa-google"></i>
            <p>Google</p>
        </div>
        <div class="option">
            <i class="fa-brands fa-github"></i>
            <p>GitHub</p>
        </div>
    </div>
</div>
    

    <script src="main.js"></script>
</body>
</html>

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 --------------------*/
/* css style.css */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

body{
    display:flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.wrapper{
    width: 300px;
    position: relative;
}

.select{
    width: 100%;
    box-shadow: 0 0 10px #0000001c;
    padding: 10px 20px;
    font-size: 20px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

#select_text, #select_arrow{
    pointer-events: none;
    transition: 0.5s;
}

.option_list{
    position: absolute;
    top: 60px;
    box-shadow: 0 0 10px #0000001c;
    width: 100%;
    font-size: 25px;
    border-radius: 8px;
    overflow: hidden;
    display: none;
}

.option{
    display: flex;
    height: 50px;
    padding: 10px 5px;
    border: 1px solid #00000010;
    align-items: center;

}
.option:hover{
    background: #f5f5f5;
}
.option i{
    font-size: 20px;
    width: 35px;
}
.option p{
    opacity: 0.5;
    transition: 0.5s;
}
.option:hover p{
    opacity: 1;
}

.hide{
    display: block;
}

.rotate{
    transform: rotate(180deg);
}

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 --------------------//
// java Script main.js

let select = document.querySelector(".select");
let select_text = document.getElementById("select_text");
let select_arrow = document.getElementById("select_arrow");
let option_list = document.querySelector(".option_list");
let option = document.querySelectorAll(".option");

select.addEventListener("click", () => {
    option_list.classList.toggle("hide");
    select_arrow.classList.toggle("rotate");
});

option.forEach(option => {
    option.addEventListener("click", () => {
        option_list.classList.toggle("hide");
        select_arrow.classList.toggle("rotate");
        select_text.innerHTML = option.innerText;
    });
});

document.addEventListener("click", (event) => {
    if (event.target !== select) {
        if (option_list.classList.contains("hide")) {
            option_list.classList.remove("hide");
            select_arrow.classList.remove("rotate");
        };
    };
});

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