<div class="msg">
<textarea class="msg__textarea"></textarea>
</div>
body {
margin: 0;
box-sizing: border-box;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
min-height: 100vh;
}
.msg {
position: relative;
z-index: 0;
max-width: 600px;
width: 100%;
}
/*
.msg:after {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: 10;
background-image: linear-gradient(
0deg,
#b2a2cd 2.38%,
transparent 2.38%,
transparent 50%,
#b2a2cd 50%,
#b2a2cd 52.38%,
transparent 52.38%,
transparent 100%
);
background-size: 80px 80px;
pointer-events: none;
} */
.msg__textarea {
width: 100%;
height: 170px;
border: 0;
box-sizing: border-box;
padding: 10px 0;
line-height: 40px;
overflow: hidden;
resize: none;
background-image: linear-gradient(
0deg,
#b2a2cd 2.38%,
transparent 2.38%,
transparent 50%,
#b2a2cd 50%,
#b2a2cd 52.38%,
transparent 52.38%,
transparent 100%
);
background-size: 80px 80px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.