CODEWITHSUNDEEP
htmlcss
Yu Yenkan
Yu Yenkan

Reputation: 765

box-shadow with scroll bar

I am playing with CSS now, i had make a TextArea with box shadow

-webkit-box-shadow: inset 0px 2px 0px 3px black;
-moz-box-shadow: inset 0px 2px 0px 3px black;
box-shadow: inset 0px 2px 0px 3px black;

and a vertical scroll bar. But the output is a bit bad, the text is overlay the box-shadow. Any idea to solve this?

enter image description here

thanks to @jiff for jsfiddle, grey box-shadow will be more observe.

jsfiddle

Upvotes: 0

Views: 2165

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 106008

you may see if using a wrapper and a pseudo would fix your issue : https://jsfiddle.net/df7Lhomu/

.tbl {
  margin:1em;
  position:relative;
  display:table;
}
.tbl:after {
  content:'';
  position:absolute;
  top:2px;
  left:2px;
  right:1.2em;;
  bottom:4px;
box-shadow: inset 0px 2px 0px 3px black;
  pointer-events:none;
}

textarea{
padding-left:3px;/* box-shadow;*/
height: 200px;
overflow-y: scroll;
background:#222;
color:#fff;
}
<div class="tbl">
  <textarea>
add
some
text
long
enough
in
order
to
see
the
text
behavior
while
scrolling
</textarea>
</div>

Upvotes: 1

user3282537
user3282537

Reputation: 99

You can used below css

white-space: nowrap;
padding:10px;

Upvotes: 0

Arthur Sergheevich
Arthur Sergheevich

Reputation: 63

Try add padding: 20px; to textarea

Upvotes: 1

Related Questions