CSS搜索框下拉选项 |css 在无知宽度居中

首先，大家需要设置输入框和下拉箭头的样式。代码如下：

input[type="text"] {
width: 250px;
height: 30px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px;
}
select {
width: 40px;
height: 30px;
background: #fff url(down-arrow.png) no-repeat 10px center;
border: 1px solid #ccc;
border-radius: 5px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

这里大家设置了一些基本样式，如输入框边框、圆角、内边距，以及下拉箭头图像和边框。同时使用了CSS3的appearance属性，隐藏了浏览器自带的下拉箭头。

接下来，大家需要设置下拉选项的样式。代码如下：

select option {
background-color: #eee;
color: #333;
}
select option:checked {
background-color: #999;
color: #fff;
}

大家使用了CSS样式来设置下拉框的选项的颜色、背景颜色和字体颜色。在选中某个选项时，大家通过:checked伪类来设置所选中的选项的颜色、背景颜色和字体颜色。

最后，大家需要使用JavaScript来实现下拉选项的显示和隐藏。代码如下：

var select = document.querySelector('select'),
options = select.querySelectorAll('option'),
display = document.querySelector('.display'),
span = display.querySelector('span');
span.innerText = options[0].innerText;
select.addEventListener('change', function () {
span.innerText = options[select.selectedIndex].innerText;
display.classList.toggle('open');
});
display.addEventListener('click', function () {
display.classList.toggle('open');
});

在这段代码中，大家首先获取了HTML中的select、option和display元素，然后设定初始化值为下拉框第一个选项的值。在select的change事件中，大家动态修改display元素中的span元素的内容。同时，大家使用classList.toggle方法来在display元素中添加或删除open类，以实现下拉选项的显示和隐藏。

通过上面的简单实现，大家可以通过CSS和JavaScript控制搜索框下拉选项的样式和显示，为网站的搜索功能提供更好的用户体验。