css - Materializecss：是否有任何类可以为文本输入添加文本前缀

Question

我需要一些东西来为 MaterializeCss 中的输入文本添加前缀。虽然它提供了 '前缀 ' 类来达到这个目的，但当我需要添加多个单词作为跨度时它不能正常工作。为了您的信息，我需要与 Bootstrap input-group-addon class等效的东西。

代码：

<div class="container">
      <div class="input-field">
        <span class="prefix">Full Name</span>
        <input type="text" name="" id="" />
      </div>
   <br> 
   <br> 
    <div class="input-field">
        <i class="prefix material-icons">attach_money</i>
        <input type="text" name="" id="" />
      </div>
   </div>

这张图片显示，当我使用单个图标时它工作正常，但在多个单词的情况下会崩溃

我非常感谢您的明智答复。

标签： cssmaterialize

Answer 1

我认为您误解了 materializecss 前缀是什么。正如文档中所述，它被称为图标前缀 - 开箱即用，它们提供了以图标作为前缀的能力：

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

<div class="input-field col s6">
  <i class="material-icons prefix">mode_edit</i>
  <textarea id="icon_prefix2" class="materialize-textarea"></textarea>
  <label for="icon_prefix2">First Name</label>
</div>

您尝试添加的 .prefix 跨度类在具体化中不存在 - 它用于图标标签。

“全名”，您尝试使用它的方式，作为输入内容的线索 - 将是一个标签元素。前缀允许您提供添加到输入的信息（例如美元符号）或速记，例如电子邮件符号。

您可以从引导程序自定义相同的功能，但它完全是一个非常不同的元素 - 您需要重新表述问题，因为说前缀无法正常工作是不准确的。

https://materializecss.com/text-inputs.html

编辑：

如果我们深入研究默认的 css，而不是在 Bootstrap 中使用 flex，materializecss 使用绝对定位，因为它适用于具有标准一致宽度的图标：

.input-field .prefix {
    position: absolute;
    width: 3rem;
    font-size: 2rem;
    -webkit-transition: color .2s;
    transition: color .2s;
    top: .5rem;
}

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

图标被赋予 3rem 宽度，然后输入被赋予 3rem margin-left 以适应它。我已将这些值调整为 10rem 以使其适用于您的文本输入 - 但如果文本更长或更短，您需要手动更新这个新的 rem 值：

https://codepen.io/doughballs/pen/XWbgWKg