'Pseudo element not showing in react

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

I have tried setting body and html height to 100% as well as setting .input-select height to 100%.

I have have tried setting display to block or inline block and setting z-index to a high value.

However so far I have not been able to make it work.

htmlcssreactjs


Solution 1:[1]

On select, we can't have pseudo selectors. You have to make one wrapper div and then on that div, you can give after, before.

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

Solution 2:[2]

You can not put a pseudo element in an input element,however you can put a hover pseudo element. Elements starting and closing in a single place like is not a container element.You can use hover here but not ::before and ::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;
}

Solution 3:[3]

Pseudo-elements are only allowed to be used on container elements. Elements like inputs, select, images, and any other self-closing element can’t use pseudo-elements because they aren’t “container elements.

Solution 4:[4]

The select box can't have a pseudo-selector. So, add one parent div and then use those selectors. Also add top/bottom/left/right positions in CSS.

Solution 5:[5]

This might help with troubleshooting-- I was having this problem and found that since I was calling the CSS in a module.css file (which adds extra characters to the class name when the page loads), the ::after pseudo element code wasn't being picked up, even though normal classes and ids were. When I moved just the pseudo element class to a normal / sitewide CSS file, it worked.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sonia Pahuja
Solution 2 Fahad
Solution 3 Sonia Pahuja
Solution 4 Sonia Pahuja
Solution 5 Benji

Related Questions