Scroll shows above css textarea - Photoshop

learningtoanimate
June 4, 2020
262 views
3 votes
5 Answers

I’ve created a <textarea> of a fixed size that allows users to scroll within it. The problem is that for some reason the scroll displays above rather than below and inside the edges.

textarea {
    width: 40%;
    min-width: 40%;
    max-width: 40%;
    min-height: 120px;
    max-height: 120px;
    padding: 10px;
    resize: none;
    display: inline-block;
    outline: none;
    box-sizing: border-box;
    border: solid 5px transparent;
    border-radius: 30px;
    background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900CC);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
}

<textarea name="message" id="message" required>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie sem mauris, vel euismod odio venenatis non. Cras sed augue at ipsum pulvinar tristique a sit amet quam. Donec tempor molestie mi vel fringilla. Etiam commodo orci ut est hendrerit pretium. Vivamus mollis non arcu nec bibendum. Phasellus posuere viverra tortor. Etiam at lorem magna. Nunc pellentesque lacus at libero ullamcorper, a malesuada augue vulputate. Ut vitae est et nulla tincidunt elementum sed a ante. Donec egestas enim at auctor iaculis. Vestibulum a elementum libero. Vivamus eget elementum leo.</textarea>

Any ideas how to make the scroll bars behave more properly? There’s also the issue with padding on the right changing when there’s a scroll bar visible.

PS: This isn’t a duplicate of Rounded corners on a textarea with a scrollbar from six years ago. The question doesn’t have any answers that approach the issue I’m facing. Nesting within a DIV isn’t something that works effectively within the form element. I just wish to have the scroll bar below the border-radius.

Just to be absolutely clear, I’m looking to do something like this (created in Photoshop as an example)

Tags: css html

Answers

Chosen as BEST ANSWER
- learningtoanimate
- June 4, 2020 at 9:26 pm
- 0 votes
0
The initial answer from M.A Shahbazi came closest to solving the question and then did. The answer from Artur helped too. Some of the CSS in that answer is off because you come into an issue with the <textarea> not having the same height as its container. Below is the CSS I settled on for anyone who comes across this question in the future and would like to see the final approach. I accepted the answer from M.A Shahbazi because it was closest and needed only a few adjustments. The main ones being the actual sizing, they needed to all have the same size in order to match up. And look more like this: than this:
.textarea-container { width: 100%; min-width: 100%; max-width: 100%; min-height: 200px; max-height: 200px; margin-bottom: 10px; background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900cc); background-origin: border-box; background-clip: padding-box, border-box; border: solid 5px transparent; border-radius: 30px; padding: 0; overflow: hidden; } textarea { width: 100%; min-width: 100%; max-width: 100%; min-height: 200px; max-height: 200px; padding: 15px; resize: none; display: inline-block; outline: none; border: none; box-sizing: border-box; font-family: 'Roboto', sans-serif; font-size: 15px; }

<div class="textarea-container"> <textarea></textarea> </div>

(Edit)

textarea {
    width: 40%;
    min-width: 40%;
    max-width: 40%;
    min-height: 120px;
    max-height: 120px;
    padding: 10px;
    resize: none;
    display: inline-block;
    outline: none;
    box-sizing: border-box;
    border: solid 5px transparent;
    border-radius: 30px;
    background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900CC);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
}
.box-content {
  height: 120px;
  width: 40%;
  overflow: auto;
  border-radius: 29px;
}

div.disabled {
    overflow-x: hidden; //horizontal
    overflow-y: scroll; //vertical
}

You can also customize your scrollbar

/* Scrollbar styles */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}

::-webkit-scrollbar-track {
border: 1px solid yellowgreen;
border-radius: 10px;
}

::-webkit-scrollbar-thumb {
background: yellowgreen;  
border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
background: #88ba1c;  
}

How about using a container for your textarea and applying border to that?

.textarea-container {
    width: 250px;
    height: 300px;
    background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900cc);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border: solid 5px transparent;
    border-radius: 30px;
    padding: 0;
    overflow: hidden;
}
textarea {
    width: 100%;
    height: 100%;
    padding: 10px;
    resize: none;
    display: inline-block;
    outline: none;
    border: none;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
}

<div class="textarea-container">
<textarea name="message" id="message" required>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie sem mauris, vel euismod odio venenatis non. Cras sed augue at ipsum pulvinar tristique a sit amet quam. Donec tempor molestie mi vel fringilla. Etiam commodo orci ut est hendrerit pretium. Vivamus mollis non arcu nec bibendum. Phasellus posuere viverra tortor. Etiam at lorem magna. Nunc pellentesque lacus at libero ullamcorper, a malesuada augue vulputate. Ut vitae est et nulla tincidunt elementum sed a ante. Donec egestas enim at auctor iaculis. Vestibulum a elementum libero. Vivamus eget elementum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie sem mauris, vel euismod odio venenatis non. Cras sed augue at ipsum pulvinar tristique a sit amet quam. Donec tempor molestie mi vel fringilla. Etiam commodo orci ut est hendrerit pretium. Vivamus mollis non arcu nec bibendum. Phasellus posuere viverra tortor. Etiam at lorem magna. Nunc pellentesque lacus at libero ullamcorper, a malesuada augue vulputate. Ut vitae est et nulla tincidunt elementum sed a ante. Donec egestas enim at auctor iaculis. Vestibulum a elementum libero. Vivamus eget elementum leo.</textarea>
</div>

Edit: After checking your ideal appearance I realized you want the overflow of the scrollbar to be hidden, so you can define overflow: hidden on textarea container and get rid of padding by setting it to padding: 0

Just wrap your textarea within a div and give some style on into div. Also remove the rows attribute from the textarea. To see the result check my codepen link here.

div {
      border: solid 5px transparent;
      border-radius: 30px;
      width: 40%; 
      min-width: 40%;
      max-width: 40%;
      height:120px;
      box-sizing: border-box;
      max-height:120px;
      background: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900CC);
      background-origin: border-box;
      background-clip: padding-box, border-box;
  overflow:hidden;
}

textarea {
    height:100%;
    width:100%;
    padding:10px;
    resize: none;
    display: inline-block;
    outline: none;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    border:none;
}

I think the only solution would be to wrap your textarea in container and apply your styles on the container:

div {
  width: 40%;
  min-height: 120px;
  max-height: 120px;
  padding: 20px;
  display: inline-block;
  outline: none;
  box-sizing: border-box;
  border: solid 5px transparent;
  border-radius: 30px;
  background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900CC);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: absolute;
}

textarea {
  position: relative;
  flex: 1 0 auto;
  margin: -20px;
  padding: 20px;
  width: 100%;
  resize: none;
}

<div>
    <textarea name="message" id="message" required>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie sem mauris, vel euismod odio venenatis non. Cras sed augue at ipsum pulvinar tristique a sit amet quam. Donec tempor molestie mi vel fringilla. Etiam commodo orci ut est hendrerit pretium. Vivamus mollis non arcu nec bibendum. Phasellus posuere viverra tortor. Etiam at lorem magna. Nunc pellentesque lacus at libero ullamcorper, a malesuada augue vulputate. Ut vitae est et nulla tincidunt elementum sed a ante. Donec egestas enim at auctor iaculis. Vestibulum a elementum libero. Vivamus eget elementum leo.</textarea>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Scroll shows above css textarea – Photoshop

Answers