html - 通过 CSS 媒体查询更改表单最初选择的选项

Question

为了让选择下拉文本适合较小的屏幕，我被要求更改最初选择的选项的文本以适应较小的屏幕。此页面是使用 Bootstrap 完成的，最初选择的选项是问题本身(作为有效选择被禁用)。

我可以使用 Javascript 来完成这个。一种快速且有效的纯 CSS 解决方案是复制 select 元素，一个类用于移动设备，一个类用于更大的屏幕，其中每个类仅显示或隐藏该元素。 (遵循中的逻辑 Swap placeholder text based on resolution (media query) )

理想情况下，我会只将此类类应用于选项元素，而不是重复整个选择元素。

<div class="form-group col-md-6 col-md-offset-3">
    <select name="budget" id="" class="form-control input-lg">
        <option class="long"  value="" disabled selected>WHAT IS YOUR TIMELINE TO COMPLETE THIS PROJECT?</option>
        <option class="short" value="" disabled selected>WHAT'S YOUR TIMELINE?</option>
        <option>I'm not sure</option>
        <option>3 months</option>
        <option>6 months</option>
        <option>1 year</option>
    </select>
</div>

移动媒体查询的 CSS 如下(其他显示相反):

.long {
    display: none;
}
.short {
    display: inherit;
}

虽然这成功地隐藏了下拉选项，但仍然可以识别所选属性，所以“您的时间线是什么？”将始终是显示的初始问题，即使选项本身未显示在下拉列表中也是如此。

同样，我只是采用复制 select 元素的解决方案，但据我所知，我想知道是否有仅 HTML/CSS 的解决方案会说“在移动设备中，最初选择了选项 2 (和可见；选项 1 被隐藏)；否则，选项 1 被选中(选项 2 被隐藏)”。

Answer 1

对于 HTML/CSS 解决方案，添加这两个类并创建针对移动设备的媒体查询。例如:

@media only screen and (max-width: 320px) {
    .short {
        display: block;
        //shows these styles on mobile
    }

    .long {
        display:none;
        //hides these styles on mobile
    }
}

HTML

<div class="form-group col-md-6 col-md-offset-3">
    <select name="budget" id="" class="form-control input-lg">
        <option class="short"  value="">Mobile Text</option>
        <option class="short" value="">Mobile Text</option>
        <option class="long">Text for anything but mobile</option>
        <option class="long">Text for anything but mobile</option>
        <option class="long">Text for anything but mobile</option>
        <option class="long">Text for anything but mobile</option>
    </select>
</div>

查看我的 codepen