html - CSS 输入样式和溢出问题

Question

我希望我的输入字段的样式与我正在构建的 div 非常相似。但是，我无法解决大小问题。

这是一个例子 http://codepen.io/anon/pen/kLwlm

还有一个(overflow:visible 和固定高度) http://codepen.io/anon/pen/Fxjzf

如您所见，它看起来与 div 非常不同，无论我如何尝试，都无法使它们看起来相似。首先，我希望以文本弹出的方式进行输入(overflow: visible？不起作用)。

其次，高度应该与div相似。设置 height 和 line-height 属性似乎确实会影响临时文本，但是当它被点击(并开始输入)时它会中断。 (检查第二个例子)

很快，欢迎提出建议。

Answer 1

在此处尝试此解决方案:

@import url(http://fonts.googleapis.com/css?family=Playfair+Display:400,700,900,400italic,700italic,900italic);

body {
  margin: 100px;
  background-color: #f7f7f7;
}
input{
  border:0;
}

div, input{
  font-family: 'Playfair Display', serif;
  font-size: 40px;
  background-color: #ff44ff;
  width: 100%;
  margin-top: 20px;
  line-height: 40px;
}

div {
  padding: 1px 0px 13px 2px;
  color: #999;
}