如何在 Material Design lite 中使用前置文本进行输入？

【问题标题】：How to have input with prepend text in material design lite?如何在 Material Design lite 中使用前置文本进行输入？
【发布时间】：2015-08-13 20:05:25
【问题描述】：

我想要这样的输入，+91 是固定的。

这是MDL网站上给出的默认代码

    <!-- Numeric Textfield -->
<form action="#">
  <div class="mdl-textfield mdl-js-textfield textfield-demo">
    <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample2" />
    <label class="mdl-textfield__label" for="sample2">Number...</label>
    <span class="mdl-textfield__error">Input is not a number!</span>
  </div>
</form>

【问题讨论】：

标签： css material-design-lite

【解决方案1】：

一种可能性是将输入包装在您放置文本的跨度中。使跨度看起来像输入并从输入本身中删除样式。

form div.mdl-textfield input.mdl-textfield__input {
  border: 0;
  margin: 0;
  padding: 0;
  outline: 0;
}
form div.mdl-textfield span.wrapper {
  border: 2px inset #808080;
  font: small-caption;
}

<!-- Numeric Textfield -->
<form action="#">
  <div class="mdl-textfield mdl-js-textfield textfield-demo">
    <span class="wrapper">+91 <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample2" /></span>
    <label class="mdl-textfield__label" for="sample2">Number...</label>
    <span class="mdl-textfield__error">Input is not a number!</span>
  </div>
</form>

【讨论】：