Form input with graphic background [closed] - html

Question

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 years ago.
Improve this question
I would like to give users the opportunity to input some text in a few colored shapes. Is it a good strategy to design the shapes in (for instance) illustrator, export as svg and put the input tags (or textarea's) in the svg file?
Other ways of doing this?

Answer 1

This is a simple example of doing what you're looking for with CSS - a starting point for you to work from.
(The CSS can be simplified down but I kept it deliberately verbose so you can see what's going on and where)
.text {
display:block;
width: 60vw;
margin: 1rem 20vw;
}
.textleft {
display: inline-block;
width:49%;
margin: 1rem 0;
padding:0 9% 0 5%;
box-sizing: border-box;
}
.textright {
width:49%;
display: inline-block;
margin: 1rem 0;
padding:0 5% 0 9%;
box-sizing: border-box;
}
.txtarea {
width:100%;
color: #000;
height: 7rem;
font-size:1rem;
box-sizing:border-box;
padding:1rem;
border: none;
border-radius:2rem;
resize: none;
overflow:hidden;
}
#red {
background-color: #c00;
color: #eee;
}
#green {
background-color: #0c0;
}
#blue {
background-color: #33f;
color: #ccc;
}
#yellow {
background-color: #ff0;
}
<div class='text'><textarea id='red' class='txtarea' name='myinfo_top'>Some Words - Click on me to type into this text box!</textarea></div>
<div class='textleft'><textarea id='green' class='txtarea' name='myinfo_left'>Some Left Words</textarea></div>
<div class='textright'><textarea id='blue' class='txtarea' name='myinfo_right'>Some Right Words</textarea></div>
<div class='text'><textarea id='yellow' class='txtarea' name='myinfo_bottoms'>Some more Words</textarea></div>

Answer 2

Create div tag that will contain elements of height and width, if you want rounded corners you might use border-radius in CSS.
div{
width: 200px;
height: 200px;
border-radius: 15px;
background-color: blue;
}
Then you can add whatever text you would like. Its the best option, adding image in the background, it takes a lot more processing time than pure CSS.