How to put 2 text input fields in one?

Question

I have see some cool effects that put two text input fields in one as a form! I have attached an image for you to see so you know what I mean. Does anyone know how to create such a thing?

Can it be done with CSS?

Answer 1

You can style it up like so - http://jsbin.com/adalot/1/

This should set you off in the right direction

  <div id='holder'>
    A :<input type='text' id='field1'/>
    B: <input type='text' id='field1'/>
  </div>

  #holder {border: solid 1px red; width: 400px; background-color: white;}
  input {border: none;}
  input:focus{outline:none;}

Answer 2

It's css .. there is no way to marry 2 distinct <input> into one.

What you saw on the image is a styled <div> containing 2 <input> witch are 'styleless'

Answer 3

使用4列将表分组并按行测试该表，并在其中插入2个文本框，在任何情况下，javascript中的显示样式均设置为none，同时还带有2个标签，而另一个表具有Submit按钮