是否可以将元素放在输入字段中？

Question

是否可以在输入字段内插入元素？这是一个例子：

我可以用什么来做到这一点？

我想知道表格，可以在输入字段中创建表格吗？

.box-login {
  width: 300px;
  height: auto;
  margin: 0 auto
}

.box-login .bots {
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radx-inpuius: 3px;
  -ms-border-radius: 3px;
  box-shadow: 0 0 4px rgba(0, 0, 0, .2);
  box-shadow: 0 0 4px rgba(0, 0, 0, .2);
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .2);
  -ms-box-shadow: 0 0 4px rgba(0, 0, 0, .2);
  background-color: #fff;
  position: relative
}

.box-login .box-inputs .line-input {
  width: 100%;
  height: 50px;
  padding-left: 0;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-left: 0px;
  border-top: 0px;
  border-right: 0px;
}

.box-login .btn-login {
  width: 100%;
  margin: 0;
  height: 50px;
  color: #fff;
  border-radius: 0 0 3px 3px;
  -webkit-border-radius: 0 0 3px 3px;
  -moz-border-radius: 0 0 3px 3px;
  -ms-border-radius: 0 0 3px 3px;
  background-color: #009edb;
  border: none;
}

<form class="box-login">

  <div class="box-inputs">
    <label class="box-input" for="cpf"></label>
    <input class="line-input" id="cpf" type="text" placeholder="CPF">
  </div>

  <div class="box-inputs">
    <label for="box-input">
            <input class="line-input" id="password" type="password" placeholder="Senha">
            </label>

  </div>
  <div>
    <button class="btn-login">ENTRAR</button>
  </div>
</form>

Answer 1

最好的方法是使用一个带有 position: absolute 的元素并将其放在输入字段的上方。试试这个代码。

<form class="box-login"  >

        <div class="box-inputs">
            <span class="icon"><img src="https://cdn3.iconfinder.com/data/icons/wpzoom-developer-icon-set/500/102-128.png"></span>
            <label class="box-input" for="cpf"></label>
            <input class="line-input" id="cpf" type="text" placeholder="CPF">
        </div>

        <div class="box-inputs">
            <span class="icon"><img src="https://cdn3.iconfinder.com/data/icons/wpzoom-developer-icon-set/500/102-128.png"></span>
            <label for="box-input">
            <input class="line-input" id="password" type="password" placeholder="Senha">
            </label>

        </div>
        <div>
            <button class="btn-login">ENTRAR</button>
</div>
</form>

.box-login{width:300px;height:auto;margin:0 auto}
 .box-login .bots{width:100%;height:auto;margin:0;border-radius:3px;-webkit-border-radius:3px;-moz-border-radx-inpuius:3px;-ms-border-radius:3px;box-shadow:0 0 4px rgba(0,0,0,.2);box-shadow:0 0 4px rgba(0,0,0,.2);-webkit-box-shadow:0 0 4px rgba(0,0,0,.2);-moz-box-shadow:0 0 4px rgba(0,0,0,.2);-ms-box-shadow:0 0 4px rgba(0,0,0,.2);background-color:#fff;position:relative}

 .box-login .box-inputs .line-input{width:100%;height:50px;padding-left:40px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;
border-left:0px;
border-top: 0px;
border-right:0px;
 }

 .box-login .btn-login{width:100%;margin:0;height:50px;color:#fff;border-radius:0 0 3px 3px;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;-ms-border-radius:0 0 3px 3px;background-color:#009edb;


    border: none;}

  .box-inputs {
    position: relative;
  }
  .box-inputs .icon {
    position: absolute;
    height: 24px;
    width: 24px;
    left: 10px;
    top: 10px;
    z-index: 2;
  }
  .box-inputs .icon img {
    width: 100%;
  }

Answer 2

不，您不能在 <input> element 中包含 any 元素。
它是一个empty (void) element，必须省略结束标签。
因此，您不能在其中包含任何元素。