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

Question

我需要在MaterializeCss中添加输入文字的前缀。尽管它提供了“ prefix”类来实现此目的，但是当我需要添加多个单词作为跨度时，它不能正常工作。为了您的信息，我需要与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>

this picture shows when I use a single icon it works fine but breaks down in case for multiple words

非常感谢您的明智答复。

Answer 1

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

<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的span类在实现中不存在-用于图标标记。
“全名”，您尝试使用它的方式，作为输入内容的线索-将是一个标签元素。前缀使您可以提供添加到输入中的信息（例如美元符号）或简写形式，例如电子邮件符号。
您可以从引导程序自定义编码相同的功能，但这是完全不同的元素-您需要重新表述这个问题，因为说前缀不能正确工作是不正确的。
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以容纳它。我已将这些值最多调整到10rem，以使其可用于您的文本输入-但是，如果文本更长或更短，则需要手动更新此新的rem值：

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