如何在 HTML 的文本框中创建文本框/形状答案

【问题标题】：How to create a textbox/shapes inside a textbox in HTML如何在 HTML 的文本框中创建文本框/形状
【发布时间】：2016-09-19 19:06:54
【问题描述】：

我想创建一个输入文本框，里面有形状或其他东西。

Click here for my desired output. :)

谢谢，

【问题讨论】：

标签： html twitter-bootstrap grails

【解决方案1】：

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

你能做的最好的就是 -

创建一个<span> 标记，这将是你的形状
创建一个容器，将输入及其旁边的<span> 包装起来。
使用position: absolute;在输入中相应地定位<span>。

我已经创建了一支笔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;
}

【讨论】：