防止重叠textarea中的文本

Question

在 Firefox 中它可以正常工作：

但在 Chrome 中会出现叠加：

如何解决？

FireFox（开发版）83.0b5

Chrome 版本 88.0.4305.3

div{
  position: relative;
}

label{
  position: absolute;
  color: blue;
  padding: 1% 2%;
}
textarea{
  padding: 25px;
}

<div>
<label>some label</label>
<textarea>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</textarea>

</div>

Answer 1

不幸的是，文本区域中的填充与 Firefox 和 Chrome 不一致。

我可能只是将文本区域包裹在具有边框和填充的 div 中，然后将文本区域放在其中，标签位于 div.

的顶部

Answer 2

如果您能找到一种方法来区分 Chrome 和 Firefox，您可以编写在 Chrome 中运行的替代代码。也许让文本有一些 spaces，并给 header 一些填充和一个与 div 的其余部分具有相同背景颜色的粗边框，使它看起来像有一个 space.

Answer 3

如其他答案所述，这与 Chrome 不一致。然而，这里有一个可能的解决方法，在 label 上使用白色背景（覆盖其下方的文本）并调整位置和填充设置（这需要一些试验和错误）：

div{
  position: relative;
}

label{
  position: absolute;
  color: blue;
  padding: 6px 10px 3px;
  background: #fff;
  width: 190px;
  top: 2px;
  left: 2px;
}
textarea{
  padding: 25px;
  padding-top: 30px;
}

<div>
<label>some label</label>
<textarea>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</textarea>

</div>

Answer 4

如果您希望滚动条与整个容器并排，Johannes 有解决方案。这不是解决 Chrome/Firefox 之间填充不一致的方法，只是另一种方法可以避免它。

保持填充一致并避免“试错”定位。

注意事项： div max-width: 400px 和其他 max-width/width 可以根据需要进行更改这是使其响应的样式选择。

textarea:focus 这会阻止 Chrome 在 textarea 上添加轮廓 - 如果您需要可访问性，那么我不会这样做或让它变得漂亮。 */

div {
  width: 100%;
  max-width: 400px;
  position: relative;
}

label {
  display: block;
  color: blue;
  background: #fff;
  border: 1px solid #000;
  width: 100%;
  box-sizing: border-box;
  padding: 5px 20px 10px 10px;
  border-bottom: none;
}

textarea {
  display: block;
  padding: 0 25px 25px 25px;
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  min-height: 200px;
  border: 1px solid #000;
  border-top: none;
  box-sizing: border-box;
  position: relative;
  top: -1px;
}

textarea:focus {
  outline: none;
}

<div class="text-area-container">
  <label>Some label</label>
  <textarea>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</textarea>

</div>

防止重叠textarea中的文本

Prevent overlapping the text in textarea

html

css

textarea