Question

我试图在textarea的底部添加一个叠加框。放置叠加框非常简单，但现在我希望textarea内容永远不会与叠加框重叠。

我的第一种方法是添加padding-bottom，以便文字永远不会到达放置覆盖框的textarea的底部。但是，当我输入时，文本将在其下面。此外，向上滚动会导致相同的不良行为。

编辑：

回应一些部分解决我的问题的答案。我试图让textarea看起来尽可能本地化，因此焦点上的边框颜色也是必要的。

＆＃13;

.container {
  position: relative;
  width: 110px;
}

textarea {
  width: 100%;
  height: 50px;
  resize: none; 
}

texarea.with-padding {
  padding-bottom: 1em;
}

span {
  position: absolute;
  bottom: 5px;
  width: 100%;
  height: 1em;
  background: rgba(255,0,0,0.5);
}

＆＃13;

<div class="container">
  <textarea name="" id="">I want this to never go under the red box.</textarea>
  <span></span>
</div>

<div class="container">
  <textarea class="with-padding" name="" id="">I tried with padding-bottom, but it doesn't work either.</textarea>
  <span></span>
</div>

＆＃13;

Answer 1

您可以使用<div>容器（其中包含textarea和overlay）作为假边框并删除textarea的边框。正如下面的代码段所示：

＆＃13;

$('textarea').on('focus', function() {
  $('.textarea-holder').css('border-color', 'rgba(255, 0, 0, 0.5)');
});

$('textarea').on('blur', function() {
  $('.textarea-holder').css('border-color', '#333');
});

＆＃13;

.textarea-holder {
  border: 1px solid #333;
  display: inline-block;
}

.textarea-holder textarea {
  display: block;
  resize: none;
  border: none;
}

textarea:focus {
  outline: none;
}

.textarea-holder .overlay {
  width: 100%;
  height: 20px;
  background: rgba(255, 0, 0, 0.5);
}

body {
  padding: 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="textarea-holder">
  <textarea rows="6"></textarea>
  <div class="overlay"></div>
</div>

＆＃13;

希望这有帮助！

Answer 2

您只需向bottom-border: 1em添加textarea即可模仿span元素。这是一个工作示例：http://codepen.io/anon/pen/woKyvy#anon-login

.container {
  position: relative;
  width: 200px;
}

textarea {
  width: 100%;
  height: 50px;
  border-bottom: 1em solid rgba(255,0,0,0.5);
}

<div class="container">
  <textarea>Try typing. The cursor will never end up under the red line.</textarea>
</div>

Answer 3

所以我继续把它写下来：

删除border并重置某些样式的textarea
为container添加了假边框，删除了span的定位并将其设为block元素。

见下面的代码：

.container {
  position: relative;
  width: 110px;
  border: 1px solid;
}

textarea {
  width: 100%;
  height: 50px;
  resize: none;
  border:none;
  outline:none;
  padding: 0;
}

.container span {
  display:block;
  width: 100%;
  height: 1em;
  background: rgba(255, 0, 0, 0.5);
}

<div class="container">
  <textarea name="" id="">I want this to never go under the red box.</textarea>
  <span></span>
</div>

Answer 4

由于Saurav Rastogi和eyetea的答案，我终于找到了解决这个谜题的方法。两者都近乎完美，但未能使textarea在焦点上突出显示其边框。我已设法使用outline保持此行为。

我认为这两种方法都很有用，因为它们可以在焦点上突出两个不同的边框。一个人使用div包装器策略将覆盖层留在外面，并使用非常厚的border-bottom将其留在里面。

＆＃13;

/* Inner border on focus solution */

.textarea-wrapper {
  border: 1px solid gray;
  display: inline-block;
}

.textarea-wrapper textarea {
  display: block;
  border: none;
}

.textarea-wrapper textarea:focus {
  outline: 1px solid green;
  outline-offset: 0;
}

.textarea-wrapper .overlay {
  width: 100%;
  height: 20px;
  background: rgba(255, 0, 0, 0.5);
}

/* Outer border on focus solution */

textarea.bottom-padded {
    border-bottom: 21px solid rgba(255,0,0,0.5);
    outline: 1px solid gray;
    outline-offset: -1px;
}

textarea.bottom-padded:focus {
    outline-color: green !important;
}

＆＃13;

<div class="textarea-wrapper">
  <textarea rows="3">Inner border on focus</textarea>
  <div class="overlay"></div>
</div>

<textarea rows="3" class="bottom-padded">Outer border on focus</textarea>

＆＃13;

避免textarea内容与底部的覆盖框重叠

4 个答案: