css - 如何在 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

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

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>