css下拉菜单自动填表

在Web开发中，经常会遇到下拉菜单自动填表的需求。下面我们来介绍如何使用CSS实现这个功能。

HTML代码：
<form>
    <label for="name">姓名:</label>
    <input type="text" id="name">
    <br><br>
    <label for="gender">性别:</label>
    <select id="gender">
        <option value="">请选择</option>
        <option value="男">男</option>
        <option value="女">女</option>
    </select>
</form>

CSS代码：
select:focus + input {
    visibility: visible;
}
input[type="text"] {
    visibility: hidden;
} 

以上代码实现的功能是：当用户点击下拉菜单，即选择性别时，输入框会自动显示出来，并且用户所选择的具体选项会自动填入输入框中。

代码的原理是利用CSS的“+”伪类选择器和“visibility”属性。当用户点击了下拉菜单，即选择了某个具体选项时，下拉菜单就会获得焦点，这时就可以让与之相邻的输入框显示出来，这样用户就能够把所选项填入输入框中了。此时，在CSS中设置输入框的“visibility”属性为“hidden”，目的是为了在用户没有点击下拉菜单时，输入框不会显示出来。

这种方式不需要JavaScript的支持，在CSS较为灵活的情况下，可以实现简单的交互效果。但需要注意的是，在使用CSS自动填表功能时，需要确保下拉菜单和输入框的相对位置正确，才能实现良好的效果。