如何使用 Material Design CSS 在选择或多选表单元素上添加图标前缀？

【问题标题】：How to do Icon Prefixes on Select or Multi select Form elements using Material Design CSS?如何使用 Material Design CSS 在选择或多选表单元素上添加图标前缀？
【发布时间】：2016-03-17 06:18:57
【问题描述】：

如何在Material Design CSS 中使用“图标前缀”来选择表单元素？根据文档，

您可以添加图标前缀，使表单输入标签更加清晰。只需在输入和标签之前添加一个带有 prefix 类的图标。

此方法适用于常规输入框，但不适用于 <select> 元素，见下文：

在<select> 的情况下如何让它工作？

【问题讨论】：

标签： html css select material-design

【解决方案1】：

在墙上撞了一会儿，我查看了核心css文件，发现了这个：

.input-field .prefix ~ input, .input-field .prefix ~ textarea {
    margin-left: 3rem;
    width: 92%;
    width: calc(100% - 3rem);
}

您可以从源代码中看到，没有为<select> 表单元素做出规定。要解决此问题，只需将此 css 脚本添加到您的源代码中，即可解决此问题：

.input-field .prefix ~ .select-wrapper {
  margin-left:3rem; 
  width:92%; 
  width:calc(100% - 3rem);
}

结果如预期 -

【讨论】：