css下拉框上加默认值

在网页中，下拉框是非常常见的元素之一，在进行网页设计时，我们可能需要将默认值添加到下拉框中，让用户可以更便捷地选择他们想要的内容。下面通过CSS的实现来给大家介绍如何添加下拉框的默认值。

/*HTML代码*/
<select>
   <option value="apple">苹果</option>
   <option value="banana">香蕉</option>
   <option value="orange">橙子</option>
</select>

/*CSS代码*/
select option[selected]{
   background-color: #ccc;
}

/*JS代码*/
var obj = document.getElementsByTagName("select")[0];
obj.options[obj.selectedIndex].setAttribute("selected", true); 

首先，在HTML中创建下拉框，设置选项的value值为不同的水果名称，如："apple"、"banana"和"orange"。CSS中，我们需要给选中的选项添加一个背景颜色，来区别于其他选项。所以，我们使用了一个CSS选择器来选择选中的选项，并且为其添加了背景颜色。其中，使用了属性选择器和伪类选择器。

最后，在JavaScript中，我们获取了第一个下拉框元素，通过options和selectedIndex属性找到选中的选项，并且使用setAttribute方法将selected属性设置为true，表示该选项已经被选中。

这样，当用户打开下拉框时，就会看到带有默认背景颜色的选项。同时，如果用户选择不同的选项，那么背景颜色也会相应地改变，方便用户进行选择。