🔥🔥 how to style select input in css
Tags: html, css, beginners, webdev
Published: 2021-05-29 12:04:49

Hello, glad you are here. I am kunaal and today we will see how to make a custom select input, a custom options input. You can see demo below.

#Demo

{% codepen https://codepen.io/kunaal_kumar/pen/xxqXeoQ %}

#Video Tutorial -

If you find this article hard or for better explanation. You can watch video tutorial.

{% youtube 3J96G5lnZ2E %}

>If you like the video tutorial. Please consider subscribing my youtube channel.

#Let's code

In index.html inside body tag write this

```HTML
<div class="container">
    <button class="select" name="select" value="options">options</button>
    <div class="options">
        <p class="item active">option 1</p>
        <p class="item">option 2</p>
        <p class="item">option 3</p>
        <p class="item">option 4</p>
    </div>
</div>
```
And add some CSS
```CSS
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*:focus{
    outline: none;
}

body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ff6767;
    font-family: 'roboto', sans-serif;
}

.container{
    position: relative;
}

.select{
    position: relative;
    width: 200px;
    height: 40px;
    border-radius: 10px;
    border: none;
    text-transform: capitalize;
    color: #fff;
    background: #292929;
    text-align: left;
    padding: 0 15px;
    font-size: 16px;
    cursor: pointer;
}

.select::after{
    content: '';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 6px;
    height: 6px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

.select:hover{
    background: #222222;
}

.select.active{
    background: #222222;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.options{
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    height: fit-content;
    background: rgba(0, 0, 0, 0.5);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    overflow: hidden;
    display: none;
}

.options.active{
    display: block;
}

.options .item{
    color: #fff;
    text-transform: capitalize;
    width: 100%;
    height: 30px;
    padding: 0 15px;
    line-height: 30px;
    cursor: pointer;
}

.options .item.active{
    background: #292929;
}
```

we also need to write JS. So let's write some
```JS
const select = document.querySelector('.select');
const optionBox = document.querySelector('.options');
const options = [...document.querySelectorAll('.options .item')];

let activeOption = 0; // default should be 0

window.onclick = (e) => {
    if(!e.target.className.includes('select')){
        select.classList.remove('active');
        optionBox.classList.remove('active');
    } else{
        select.classList.toggle('active');
        optionBox.classList.toggle('active');
    }
}

options.forEach((item, i) => {
    item.onmousemove = () => {
        hoverOptions(i);
    }
})

const hoverOptions = (i) => {
    options[activeOption].classList.remove('active');
    options[i].classList.add('active');
    activeOption = i;
    setValue();
}

window.onkeydown = (e) => {
    if(select.className.includes('active')){
        e.preventDefault();
        if(e.key === 'ArrowDown' && activeOption < options.length - 1){
            hoverOptions(activeOption + 1);
        } else if(e.key === 'ArrowUp' && activeOption > 0){
            hoverOptions(activeOption - 1);
        } else if(e.key === 'Enter'){
            select.classList.remove('active');
            optionBox.classList.remove('active');
        }
    }
}

const setValue = () => {
    select.innerHTML = select.value = options[activeOption].innerHTML;
}

setValue();
```
I hope you understood everything. If you have any doubt or you find any mistake that I made or you have any suggestion feel free to ask me in comment.

>If you are interested in programming and want to know how I a 15yr old teen do coding make these design. You can follow me on my Instagram. I am also planning to post my game development stuff on Instagram.

[My youtube Channel](https://www.youtube.com/c/TechyProgrammers/), [Instagram](https://www.instagram.com/techy_programmers/)