Question

.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设置为较高的值。

但是到目前为止，我还无法使其正常工作。

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

Answer 2

您不能在输入元素中放置伪元素，但是可以将悬停伪元素放置。在单个位置开始和结束的元素不是容器元素。您可以在此处使用悬停，但不能使用:: before和:: after

System.in

Answer 3

伪元素仅允许在容器元素上使用。像输入，选择，图像和任何其他自动关闭元素之类的元素不能使用伪元素，因为它们不是“容器元素”。

伪元素未显示在反应中

3 个答案: