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;
}

虽然这成功隐藏了下拉选项，但仍然可以识别所选属性，因此＆＃34;你的时间表是什么？＆＃34;将始终显示初始问题，即使选项本身未显示在下拉列表中。

同样，我只是想要一个复制select元素的解决方案，但据我所知，我想知道是否有一个HTML / CSS-only解决方案可以说＆＃34;在移动设备中，选项2是最初选择（并且可见;选项1被隐藏）;否则，选择选项1（隐藏选项2）＆＃34;。

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

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

1 个答案: