CSS实现两行input框样式

需求

实现如下这样的两行的input框样式。placeholder是两行的:
CSS实现两行input框样式_第1张图片
在输入的时候也是两行:
CSS实现两行input框样式_第2张图片

实现

demo: https://jsfiddle.net/2L7adr86/
不要想着把input变为两行,而是直接使用textarea。如果在mobile的时候需要显示成input一样的样式,可以将row的值改成1,并在样式上加上white-space: nowrap;

<textarea rows="2" resize="none" placeholder="Enter Name, City, State or Zip Code">textarea>
textarea{
  resize: none;
  font-size: 16px;
  padding: 10px 30px 10px 5px;
  overflow: hidden;
  
}

你可能感兴趣的:(CSS,css,input两行)