具有图形背景的表单输入[关闭]答案

【问题标题】：Form input with graphic background [closed]具有图形背景的表单输入[关闭]
【发布时间】：2020-05-08 18:13:27
【问题描述】：

我想让用户有机会以几种颜色的形状输入一些文本。在（例如）illustrator 中设计形状、导出为 svg 并将输入标签（或 textarea 的）放入 svg 文件中是否是一个好策略？

其他方法？

【问题讨论】：

请阅读How to Ask和minimal reproducible example
这可以通过 css 轻松完成
查看您的示例图像；最好的方法是使用纯 CSS。它简单、智能且通用。

【解决方案1】：

创建包含高度和宽度元素的 div 标签，如果你想要圆角，你可以在 CSS 中使用border-radius。

div{
  width: 200px;
  height: 200px;
  border-radius: 15px;
  background-color: blue;
}

然后你可以添加任何你想要的文本。它是最好的选择，在后台添加图像，它比纯 CSS 需要更多的处理时间。

【讨论】：

【解决方案2】：

这是一个使用 CSS 完成您正在寻找的事情的简单示例 - 一个您工作的起点。

（CSS 可以简化，但我故意让它变得冗长，这样你就可以看到发生了什么以及在哪里）

.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>

【讨论】：