Emojione区域定义的文本区域不接受任何覆盖CSS修复。

Question

我在我的项目中使用了最新的Emojione Area。我的textarea大致如下：

<textarea id="emojionearea" style="display:none"></textarea>

我使用最新的jQuery v3.4.1 min库。我的代码类似于这样：

$("#emojionearea").emojioneArea();

但我的问题在这里出现了。我不能再更改textarea的样式了。我尝试使用一些CSS，甚至用!important覆盖默认样式，但什么也没有发生。我想要下面的CSS：

#emojionearea {
    width: 100vw!important;
    position: fixed!important;
    bottom: 0!important;
}

那么，有什么办法吗？提前感谢。

- Debarchito

Answer 1

要解决这个问题，您需要执行以下步骤：

.myCustomCss {
   width: 100vw!important;
   position: fixed!important;
   bottom: 0!important;
}

完成！其余的代码没问题。只需要将你的 textarea 更新为：

<textarea class="myCustomCss" id="emojionearea"></textarea>

注意: 你不能直接向你的textarea添加CSS。而是需要将所有的CSS嵌套在一个类中，然后在声明其id之前将其添加到textarea中。为什么呢？那就叫做继承。

- Gaming King

Answer 2

在 HTML 文件的顶部添加样式，并使用自定义类名来覆盖 emojioneArea 插件 的样式。

$("#myTextarea").emojioneArea({
  pickerPosition: "bottom",
  filtersPosition: "bottom",
  tonesStyle: "square",
  shortnames: true,
  tones:false,
  search:false,
  placeholder: "Message (optional)",
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.2/emojionearea.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.2/emojionearea.css" rel="stylesheet"/>

<style>
.custom{
   width:500px;
   height:70px;
   background-color: rgb(0, 141, 228, 0.1);
}
</style>

<textarea class="custom" id="myTextarea"></textarea>

- Gass

Answer 3

这样做是行不通的。将您的文本区域放在一个 div 中，并更改 div 的属性以更改文本区域的属性。

$(document).ready(function(){
$("#myTextarea").emojioneArea(
{
pickerPosition  :"bottom"
}
);
});

.myDiv{
width:20rem;
height:10rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.1/emojionearea.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.1/emojionearea.css" rel="stylesheet"/>


<div class="myDiv">
<textarea id="myTextarea">

</textarea>
</div>

- Raj Vashishtha