如何在HTML

Question

我想创建一个输入文本框，其中的内部有形状或其他。

Click here for my desired output. :)

谢谢，

Answer 1

您无法使用:after＆amp; :before因为 :before和:after在容器内呈现，<input>不能包含其他元素。

你能做的最好的是 -

• 创建一个<span>标签，这将是您的形状
• 创建一个包装输入和输出的容器。旁边的<span>。

• 使用<span>将position: absolute;相应地置于输入内。

  我创建了一支笔Shown here

HTML

<div class="container">
  <input type="text" />
  <span></span>
</div>  

CSS

.container { display: inline; position: relative;}
input { width: 400px; }
span {
  background: green;
  position: absolute;
  right: 5px;
  top: 4px;
  width: 20px;
  height: 10px;
}