-2

enter image description hereSplitting text area into multiple text area where each character or number holds inside different column. The last two column should be color coded. Can anyone please help here with css code.

sudhan
  • 1
  • 2

2 Answers2

0

There are multiple ways to do that.

1: you can use multiple input box to do that. (you will be able to give custom color for last two input boxes)

2: you can use one text area. but you won't be able to give custom color for last two blocks.

you can find your answer here: How to partition input field to appear as separate input fields on screen?

Harpreet Singh Dhot
  • 108
  • 3
  • Hi Harpreet, Your answer is helpful and we can make existing design with multiple input box but we have existing text fields where we have to split and enter the values, can you suggest any simple way to split text field alone into multiple column text field, like the image attached in the question – sudhan Dec 28 '20 at 13:54
0

You can color the part with a CSS background, but you can not color exactly two columns.

But be aware of bad cross-browser support and there can not be overflow.

:root {
  /* adjust to select approximately two cols */
  --rightBorder: 2.4em;
}

textarea {
  /* create a linear gradient background with sharp edges (no gradient) */
  background: linear-gradient(to right, burlywood calc(100% - var(--rightBorder)), red calc(100% - var(--rightBorder)));
  /* cut background to show only behind text (use text as a mask) */
  background-clip: text;
  -webkit-background-clip: text;
  text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  /* irrelevant */
  font-size: 25px;
  font-family: sans-serif;
  font-weight: 700;
}
<textarea cols="20" rows="15">
AAAHHHHHHHHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABBBGGGGGGGGGBBBBBBBBFFFFFFFFFFFBBBBBBBBBBBBBBBBBBBBCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCDDDDDDDDDDDDDDDDDDDDD
</textarea>
Andris Jefimovs
  • 689
  • 6
  • 17