Question

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

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

正如你所看到的，它看起来与div非常不同，无论我尝试什么，我都无法使它们看起来相似。首先，我希望以文本弹出的方式进行输入（overflow: visible？不工作）。

其次，height应与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;
}

Answer 2

我尝试将输入放在div中，然后将输入背景设为透明。你可以根据自己喜欢的间距来玩，但它有效http://codepen.io/anon/pen/Brcpl

Answer 3

我想出了这个JSFiddle。我使用填充删除了行高和定位文本（修复了输入文本的对齐）。我还设置了占位符样式。这是我改变的CSS的一部分（请阅读其中的注释）。

div, input{
  font-family: 'Playfair Display', serif;
  font-size: 40px;
  background-color: #ff44ff;
  width: 100%;
  margin-top: 20px;
  padding: 5px 0px 5px 0px;/*use padding to adapt the size*/
}
/*Change placeholder properties*/
#s::-webkit-input-placeholder {
   color: black;
}
#s:-moz-placeholder { /* Firefox 18- */
   color: black;  
}
#s::-moz-placeholder {  /* Firefox 19+ */
   color: black;  
}
#s:-ms-input-placeholder {  
   color: black;  
}

PS：我建议不同地设置输入框的样式，以便您网站的访问者注意到它实际上是一个输入框。

Answer 4

这个怎么样：http://codepen.io/anon/pen/lcgAD

<强> CSS

div input {
  border: none;  
  font-size: 40px;
  width: 100%;
  background: transparent;
  color: #000;
  font-family: 'Playfair Display', serif;
}

div input:hover {

}

div {
  color: #000;
  background-color: #892;
  height: 41px;
}

<强> HTML

<div>
  <input placeholder="Enter E-Mail ayxml@gmail.com" value="Enter E-Mail ayxml@gmail.com"/>
</div>

CSS输入样式和溢出问题

4 个答案: