html - 单击文本框 css 时制作一个像按钮一样的小图标

Question

我有一个表单，当我点击文本框时，我也想像 JIRA 一样在右下角添加类似按钮的图标，并且想要插入表情符号和一些其他选项，就像在 JIRA 中一样

当我点击文本框时，我已经为此添加了 CSS，当我的文本框在右下角被点击时如何添加按钮，插入表情符号选项也会有帮助

.answer input:focus{
  background: white;
  outline: none;
  border: 1px solid royalblue ;
  float: bottom !important;
  height: 75px;
}

Answer 1

由于 textarea 和 input 不支持 ::before 和 ::after 伪元素，最安全的做法是使用同级选择器来显示图标重点。每个包裹在一个容器元素上，所以它可以相对定位，以便将图标绝对定位在它应该在的位置

.wrapper{
  display:inline-block;
  position:relative;
}

textarea{
  width:200px; height:150px;
}
textarea:focus + .icon{
  /*here would be your icon*/
  position:absolute;
  bottom:10px; right:10px;
  width:30px; height:30px; 
  border-radius:50%;
  background:chartreuse;
}

<div class="wrapper">
  <textarea></textarea>
  <div class="icon"> </div>
</div>