Material Design Lite - 如何将内联图标放入表单答案

【问题标题】：Materail Design Lite - How to put inline icon in formMaterial Design Lite - 如何将内联图标放入表单
【发布时间】：2023-03-10 18:36:01
【问题描述】：

我想在字段的同一行放置面部图标。代码是这样的：

<i class="material-icons">face</i>
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" id="sample3">
    <label class="mdl-textfield__label" for="sample3">Text...</label>
  </div>

结果是这样的：

如何将图标和字段放在同一行？

谢谢

【问题讨论】：

标签： icons material-design-lite

【解决方案1】：

以电子邮件地址/电子邮件图标为例。

HTML

将图标添加为文本字段的子元素

<div class=
"mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-upgraded"
data-upgraded=",MaterialTextfield">
    <input class="mdl-textfield__input" id="textfield-EmailAddress" type=
    "email">
    <label class="mdl-textfield__label" for=
    "textfield-EmailAddress">Email Address</label>
    <span class="mdl-textfield__error">Please Enter Valid Email Address</span>
    <i class="material-icons mdl-textfield__label__icon">mail</i>
</div>

CSS

.mdl-textfield__label__icon {
   position: absolute;
   right: 0;
   top: 20px;
}

所需资源

您需要同时加载 MDL CSS 和 Material Design 图标

<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">

MDL JS 将有助于动态行为

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script defer src="https://code.getmdl.io/1.1.3/material.min.js">   </script>

例如，您可以让图标在聚焦时变为与输入相同的“活动”颜色

 .mdl-textfield.is-focused .mdl-textfield__label__icon, .mdl-textfield.is-invalid.is-focused .mdl-textfield__label__icon  {
    color: rgb(63,81,181);
 }

如果您希望图标左对齐，您可以调整上面的 CSS，但还需要调整输入的填充以确保输入的文本不会与图标冲突。上述解决方案仍然可行，但图标右对齐不太可能发生

【讨论】：

【解决方案2】：

有一个solution by Jeremy Fily 用于左对齐的文本字段图标。

解决方案还包括js根据是否选中对字段和图标进行着色，但是左侧内联图标的部分就是这个css

.mdl-textfield__icon {
  width: 32px;
  text-align: center;
  position: absolute;
  line-height: 1.5;
}

.mdl-textfield__icon ~ * {
  margin-left: 48px;
  width: calc(100% - 48px);
}

【讨论】：