Question

是否可以在输入字段中插入元素？这是一个example。

我能用什么来实现这一目标？

我想知道表格，有可能在输入字段中创建一个表吗？

SELECT * FROM posts INNER JOIN profile ON posts.user_id = profile.user_id 
WHERE posts.user_id IN
  (SELECT user_id FROM users WHERE class_name IN 
    (SELECT class_name FROM classroom WHERE created_by = '456'))
OR posts.user_id IN 
  (SELECT user_id FROM users WHERE role = 'teacher' AND school_name = 'SK Taman Megah')
ORDER BY posts.created_at DESC;

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

Answer 1

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

Answer 2

执行此操作的最佳方法是使用postion：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%;
  }

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

2 个答案: