Question

我正在使用twitter bootstrap 3.2.0 这是代码：

.textarea textarea {
  background-color: white;
  background-image: url("http://ello.96.lt/images/as.jpg");
  line-height: 1.56em;
  padding-left: 4.2em;
  padding-right: 0.3em;
  border: solid 1px #525252;
}

<div class="col-lg-8 col-md-8 col-xs-12">
  <!-- Name input-->
  <div class="col-lg-10 col-lg-offset-1 col-md-10 col-xs-8 textarea">
    <div class="form-group float-label-control">
      <label for="" style="font-size: 2em;">Please leave some of yours contact details below</label>
      <textarea id="email_comment" class="form-control" style="color: #424242 !important;" placeholder="Press here with mouse to edit and start writing a letter for me" rows="14"></textarea>
    </div>
  </div>
  <!-- Form actions -->
  <div class="col-lg-12 col-md-12 col-xs-12 form-group submit">
    <button id="submit" type="button" class="btn btn-sunny text-uppercase btn-lg">Send</button>
  </div>
</div>

我想这样做：

http://jsfiddle.net/bluetidepro/3Rdqy/

http://bookofzeus.com/articles/css/css-styling-textarea-give-notebook-notepad-look/

左下角有双边框。我真的想将这两个边框添加到我的textarea。我尝试了很多方法，但仍然无法工作

Answer 1

我在textarea周围添加了一个包装元素，然后使用伪元素在底部创建了较窄的边框。

＆＃13;

.textarea textarea {
  background-color: white;
  background-image: url("http://ello.96.lt/images/as.jpg");
  line-height: 1.56em;
  padding-left: 4.2em;
  padding-right: 0.3em;
  border: solid 1px #525252;
}
.jbutler483 {
  position: relative;
  display: inline-block;
}
.jbutler483:before {
  content: "";
  position: absolute;
  bottom: -1px;
  right: 1px;
  width: 100%;
  background-image: url("http://ello.96.lt/images/as.jpg");
  height: calc(100% - 4px);
  z-index: -1;
  border: 2px solid gray;
}

＆＃13;

<div class="col-lg-8 col-md-8 col-xs-12">
  <!-- Name input-->
  <div class="col-lg-10 col-lg-offset-1 col-md-10 col-xs-8 textarea">
    <div class="form-group float-label-control">
      <label for="" style="font-size: 2em;">Please leave some of yours contact details below</label>
      <div class="jbutler483">
        <textarea id="email_comment" class="form-control" style="color: #424242 !important;" placeholder="Press here with mouse to edit and start writing a letter for me" rows="14"></textarea>
      </div>
    </div>
  </div>
  <!-- Form actions -->
  <div class="col-lg-12 col-md-12 col-xs-12 form-group submit">
    <button id="submit" type="button" class="btn btn-sunny text-uppercase btn-lg">Send</button>
  </div>
</div>

＆＃13;

Answer 2

.textarea {
position: relative;
}
.textarea:after{
    content:''; 
    position:absolute; 
    width: 100%; 
    bottom: 10px; 
    left: 0; 
    border-bottom: 1px solid #F8D3D3;
}

这将使textarea出现红色边框。附上你的：之前和之后的一个块元素（div）不在textarea上（可能是你尝试过但没有用的）。我还建议你在textarea周围放一个div，宽度为：auto，这样你的边框就可以用你的textarea缩放，而不是同样包含标签的.textarea div。

Answer 3

只需添加此css

即可

.textarea textarea {
    background-color: white;
    background-image: url("http://ello.96.lt/images/as.jpg");
    line-height: 200%;
    padding-left: 75px;
    padding-right: 0.3em;
    border: solid 1px #525252;
}

<强> Check This DEMO

如何在响应式textarea中添加第二个边框？

3 个答案: