[分享]css3搜索框下拉框代码

在网页设计中，搜索框下拉框是一个常见且实用的组件，可以帮助用户快速找到想要的内容。而使用CSS3技术，我们可以轻松地实现一个美观且实用的搜索框下拉框。下面是代码示例：/ 搜索框样式 / .search...

在网页设计中，搜索框下拉框是一个常见且实用的组件，可以帮助用户快速找到想要的内容。而使用CSS3技术，我们可以轻松地实现一个美观且实用的搜索框下拉框。下面是代码示例：

/* 搜索框样式 */
.search-box{
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.search-box input[type="text"]{
    font-size: 14px;
    color: #555;
    padding: 10px 40px 10px 10px;
    width: 250px;
    border: 1px solid #ccc;
    border-radius: 3px;
    outline: none;
}

.search-box button{
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: none;
    background: url(search-icon.png) no-repeat center center;
    background-size: 20px;
    cursor: pointer;
}

/* 下拉框样式 */
.dropdown{
    position: absolute;
    top: 45px;
    left: 0;
    width: 100%;
    max-height: 200px;
    z-index: 999;
    overflow: auto;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
}

.dropdown li{
    font-size: 14px;
    color: #555;
    padding: 10px;
    cursor: pointer;
    transition: .2s;
}

.dropdown li:hover{
    background: #f0f0f0;
} 

在上面的代码中，我们首先定义了搜索框和下拉框的样式。搜索框包含一个输入框和一个搜索按钮，使用了相对定位和绝对定位来实现按钮的位置。下拉框使用了绝对定位和overflow属性来实现滚动条功能，同时添加了鼠标悬停效果。

接下来，我们使用JavaScript来实现下拉框的显示和隐藏。代码如下：

var searchBox = document.querySelector('.search-box');
var inputBox = searchBox.querySelector('input[type="text"]');
var dropdown = document.createElement('ul');

function showDropdown(){
    dropdown.classList.add('dropdown');
    searchBox.appendChild(dropdown);
}

function hideDropdown(){
    dropdown.classList.remove('dropdown');
    dropdown.innerHTML = '';
}

inputBox.addEventListener('focus', showDropdown);

inputBox.addEventListener('blur', function(){
    setTimeout(hideDropdown, 200);
});

for(var i=1; i<=10; i++){
    var dropdownItem = document.createElement('li');
    dropdownItem.textContent = '搜索结果'+i;
    dropdown.appendChild(dropdownItem);
}

dropdown.addEventListener('click', function(e){
    var clickedItem = e.target;
    inputBox.value = clickedItem.textContent;
    hideDropdown();
}); 

在上面的代码中，我们使用addEventListener方法来监听输入框的focus和blur事件。当输入框被聚焦时，下拉框就会显示出来；当输入框失去焦点时，下拉框又会自动隐藏。同时，我们还使用了一个循环来生成下拉框列表，并使用addEventListener方法来监听鼠标单击事件。当用户单击下拉框中的选项时，输入框会自动填充相应的内容。

综上所述，使用CSS3技术实现一个搜索框下拉框并不难，只需注意样式和JavaScript的编写即可。希望本文对您有所帮助！