Twitter Bootstrap Question posted in

Twitter bootstrap – how to add second border to responsive textarea?

i’m using twitter bootstrap 3.2.0
here is code:

jsFiddle

.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>

i want to do this:

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

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

there is double border in left and bottom.
i really want to add these 2 borders to my textarea. i tryed a lot of ways, but still doesnt work

Tags:

3

Answers


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

    that will make a red border bellow the textarea. Attach your :before and :after on a block element (div) not on the textarea (maybe that’s what you tried and did not work). I also suggest that you put a div around the textarea itself, with width: auto, so that your border will scale with your textarea, not the .textarea div that also contains the label.

    Login or Signup to reply.
  2. 0

    I’ve added a wrapper element around your textarea, and then used a pseudo element to make the narrower border on the bottom.

    .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;
}
    <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>
    Login or Signup to reply.
  3. 0

    Just add this 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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search