创建具有多个字段的单个 <input> 类型 [关闭]答案

【问题标题】：Creating a single <input> type with multiple fields [closed]创建具有多个字段的单个 <input> 类型 [关闭]
【发布时间】：2016-06-26 23:28:05
【问题描述】：

为清楚起见进行了编辑：

虽然@grateful 回答了这个问题，但我会尝试扩展它，以防它对其他人有用...

我的项目包含一个页面 rsetup.php，其中包含一些访问 MySQL 数据库以填充页面的 HTML 部分的 php。 HTML 创建一个带有“标准”字段的表单，例如单选按钮、复选框和文本字段。

表单的其中一个部分具有数据库字段的多个实例，用于创建可选的“过滤器链”。我希望实现的输入字段类型如下所示：

[标签][操作][值]

其中 label 是过滤器的名称，op 是 ==、!= 或 NULL，而 value 是任意操作数（通常是字符串）。理想情况下，输入类型将在查询时返回所有三个子字段。

下面@grateful 提供的答案为我指明了正确的方向。一些调整，它将完全满足我的需要。如果社区中的其他人需要类似的解决方案，这是一个很好的起点。

很抱歉，没有代码示例来说明这个问题，但该项目是我工作的公司内部的，我很确定任何公开曝光都会不受欢迎......

提前感谢您的帮助， 405nm

【问题讨论】：

你能告诉我们你到目前为止做了什么吗？
可能 2 个选择和 1 个文本输入，但实际问题是什么？
您可以使用一个带有pattern 属性的输入来验证，或者尝试将 3 个输入合成为一个虚拟输入，这需要一个自定义元素才能在表单中作为一个输入正确运行... .
其实@grateful 几乎回答了上一篇文章中的问题。感谢收看！

【解决方案1】：

如果我对您的理解正确，那么棘手的事情是让 css 正确 - 使这 3 个部分看起来像是同一个输入字段的一部分。为此，最好给它们赋予相同的类名并将它们的外观属性设置为“无”，即：

  -webkit-appearance: none;
  -moz-appearance:    none;
  appearance:         none;

但是，完成此操作后，您需要重新设置元素的样式，因此需要大量的 css。我在 Codepen here 上为您创建了一个示例

【讨论】：