css下拉列表选择时背景变黑

CSS是我们前端开发中使用率非常高的一种技术，它可以方便我们对网页进行美化和布局。而下拉列表选择框是在网页上经常出现的控件之一，为了增加用户体验，我们经常会在下拉列表选择框中加入背景变黑的效果来提醒用户何时选择了选项。

 <select onchange="change()">
        <option value="1">选项1</option>
        <option value="2">选项2</option>
        <option value="3">选项3</option>
        <option value="4">选项4</option>
    </select>

    <script>
        function change() {
            var selectbox = document.getElementsByTagName("select")[0];
            var selectIdx = selectbox.selectedIndex;
            if (selectIdx == 0) {
                document.body.style.backgroundColor = "#FFFFFF";
            } else {
                document.body.style.backgroundColor = "#000000";
            }
        }
    </script> 

在上面的代码中，我们通过给下拉列表添加onchange事件，当用户选择选项时就会触发change()函数。在函数中，我们首先通过getElementsByTagName()方法来获取页面上的下拉列表控件，然后使用selectedIndex属性获取当前选中的选项索引。当选项索引为0时，表示用户选择的是第一个选项，此时页面背景色为白色；否则，表示用户选择的非第一个选项，此时页面背景色变为黑色。

通过以上代码的实现，我们可以很轻松地为网页上的下拉列表选择框添加背景变黑的效果，提升用户体验。在实际开发中，我们还可以对背景色进行更加细致的控制，比如设置渐变效果、透明度等，让网页看起来更加美观和动态。