点击文本框css时制作一个像按钮这样的小图标

Question

我有一个表单，当我点击文本框时，我想要像JIRA一样在右下方的按钮图标，并希望有插入表情符号和其他一些选项，如JIRA

我在单击文本框时添加了CSS，如果在右下角单击文本框时添加按钮，插入表情符号选项也会有帮助

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

Answer 1

由于textarea和输入不支持::before和::after伪元素，最安全的选择是使用兄弟选择器在焦点上显示图标。每个包装在一个容器元素上，因此它可以相对定位，以便将图标绝对定位在它应该

的位置

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;