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

Question

Edited for clarity:

Although this question was answered by @grateful, I'll try to expand it in case it should prove useful to others...

My project contains a page, rsetup.php, that contains some php that accesses a MySQL database to populate the HTML portion of the page. The HTML creates a form with "standard" fields like radiobuttons, checkboxes and text fields.

One of the sections of the form has multiple instances of a database field that are used to create an optional "filter chain". The type of input field I'm looking to implements looks like:

[label][op][value]

Where label is the name of a filter, op is either ==, != or NULL and value is an arbitrary operand (usually a string). Ideally the input type will return all three subfields when queried.

The answer provided by @grateful below pointed me in the right direction. A few tweaks and it will do exactly what I need. If anyone else in the community needs a similar solution, this is a great starting point.

I'm sorry there are no code examples to illustrate this question but the project is internal to the company I work for and I'm pretty sure any public exposure would be frowned upon...

Thank you in advance for any help, 405nm

Answer 1

If I understand you correctly, the tricky thing is getting the css right - making the 3 parts look like part of the same input field. To do this, it's good to give them the same class name and set their appearance attribute to 'none', ie:

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

However, having done this, you need to restyle the elemnts, hence quite a lot of css. I created an example for you on Codepen here