如何在material design lite中输入前置文本？

Question

我想有一个像这样的输入+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>

Answer 1

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

​

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>

​