伪元素未在反应中显示答案

【问题标题】：Pseudo element not showing in react伪元素未在反应中显示
【发布时间】：2020-09-27 05:10:28
【问题描述】：

.input-select{
    position: relative;
    height: 100%;
}

.input-select::before{
    content: '';
    position: absolute;
    display: inline-block;
    height: 50px;
    width: 50px;
    background-color: red;
    z-index: 100;
}

<div className="input-group">
     <label htmlFor="type">GST Type: </label>
     <select name="type" id="type" className="input-select">
        <option>Registered</option>
        <option>Unregistered</option>
     </select>
</div>

我尝试将 body 和 html 高度设置为 100% 以及将 .input-select 高度设置为 100%。

我已经尝试将显示设置为块或内联块并将 z-index 设置为高值。

但是到目前为止我还没有让它工作。

【问题讨论】：

选择输入不允许伪元素。 stackoverflow.com/questions/21103542/…
这能回答你的问题吗？ Can I use a :before or :after pseudo-element on an input field?

标签： html css reactjs

【解决方案1】：

在选择时，我们不能有伪选择器。您必须制作一个包装 div，然后在该 div 上，您可以在之前、之后给出。

<div class="input-select">
    <select>
        <option>United Kingdom</option>
        <option>Canada</option>
        <option>United States</option>
    </select>
</div>

.input-select::before{
  content: '';
  position: absolute;
  display: inline-block;
  height: 50px;
  width: 50px;
  background-color: red;
  z-index: 100;
}

【讨论】：

【解决方案2】：

您不能在输入元素中放置伪元素，但是可以放置悬停伪元素。在一个地方开始和关闭的元素不是容器元素。您可以在此处使用悬停，但不能使用 ::before 和 ::after

.input-select{
  position: relative;
  height: 100%;
}

.input-select:hover{
  content: '';
  position: absolute;
  display: inline-block;
  height: 50px;
  width: 50px;
  background-color: red;
  z-index: 100;
}

【讨论】：

【解决方案3】：

伪元素只能用于容器元素。输入、选择、图像等元素和任何其他自闭合元素都不能使用伪元素，因为它们不是“容器元素”。

【讨论】：

【解决方案4】：

选择框不能有伪选择器。因此，添加一个父 div，然后使用这些选择器。同时在 CSS 中添加上/下/左/右位置。

【讨论】：

请添加一些代码。

【解决方案5】：

这可能有助于故障排除——我遇到了这个问题，发现由于我在 module.css 文件中调用 CSS（在页面加载时向类名添加了额外的字符）， ::after 伪元素代码没有被拾取，即使普通的类和 id 被拾取。当我只将伪元素类移动到普通/站点范围的 CSS 文件时，它起作用了。

【讨论】：