如何在材料设计精简版中输入前置文本？

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

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<!-- 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>

＆＃13;

＆＃13;

＆＃13;