🔥🔥 如何在 CSS 中设置选择输入的样式

演示

视频教程 -

让我们开始编码

大家好，很高兴看到这里。我是 kunaal，今天我们将学习如何创建自定义选择输入框和自定义选项输入框。您可以在下面查看演示。

演示

视频教程 -

如果你觉得这篇文章比较难或者需要更好的解释，可以观看视频教程。

如果您喜欢该视频教程，请考虑订阅我的 YouTube 频道。

让我们开始编码

在 index.html 的 body 标签内写入

<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>

并添加一些 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;
}

我们还需要编写 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();

希望你理解了所有内容。如果你有任何疑问，或者发现我犯了任何错误，或者有任何建议，欢迎在评论区留言。

如果你对编程感兴趣，想知道我这个15岁的少年是如何编程的，那就来设计这些吧。你可以在我的Instagram上关注我。我还计划在Instagram上发布我的游戏开发经验。

我的 YouTube 频道、Instagram

文章来源：https://dev.to/themodernweb/how-to-make-a-custom-select-input-filled-working-custom-options-input-3734

🔥🔥 如何在 css 中设置选择输入的样式演示视频教程 - 让我们开始编码吧

🔥🔥 如何在 CSS 中设置选择输入的样式

演示

视频教程 -

让我们开始编码

演示

视频教程 -

让我们开始编码