如何编写HTML和CSS代码实现图示带标签的选择输入框？

调整后的HTML结构 #

用容器包裹标签与输入框，结构更规整，便于样式控制：

<div class="tag-input-container">
  <span class="tag">前端开发</span>
  <span class="tag">CSS</span>
  <input type="text" class="tag-input" placeholder="添加新标签...">
</div>

对应的CSS样式 #

通过以下代码实现参考图的视觉效果：

/* 外层容器 */
.tag-input-container {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  width: 350px;
  flex-wrap: wrap;
  background-color: #ffffff;
}

/* 标签样式 */
.tag {
  background-color: #eff6ff;
  color: #2563eb;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* 标签关闭按钮 */
.tag .close-btn {
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
}

/* 输入框样式 */
.tag-input {
  border: none;
  outline: none;
  flex: 1;
  padding: 4px 0;
  font-size: 14px;
  min-width: 100px;
}

.tag-input::placeholder {
  color: #9ca3af;
}

实现要点说明 #

• 用flex布局实现标签与输入框横向排列，flex-wrap: wrap保证标签过多时自动换行
• 标签设置独立背景色与文字色，和输入框形成视觉区分
• 输入框去掉边框与多余内边距，和容器视觉融合，保持整体统一
• 可根据参考图细节调整颜色、圆角、间距等参数，比如标签背景色、容器边框样式等

内容的提问来源于stack exchange，提问作者himabindu a