Pseudo element not showing in react

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>

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.

Select inputs don't allow pseudo elements. https://stackoverflow.com/questions/21103542/pseudo-elements-and-select-tag — Thomas Bunting, Sep 27 '20 at 05:49
Does this answer your question? [Can I use a :before or :after pseudo-element on an input field?](https://stackoverflow.com/questions/2587669/can-i-use-a-before-or-after-pseudo-element-on-an-input-field) — Asaf, Sep 27 '20 at 05:50

score 0 · Answer 1 · answered Sep 27 '20 at 06:20

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

score 0 · Answer 2 · answered Sep 27 '20 at 06:21

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

score 0 · Answer 3 · answered Sep 27 '20 at 06:23

0

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.

answered Sep 27 '20 at 06:23

Sonia Pahuja

1
2

score 0 · Answer 4 · answered Sep 23 '21 at 07:22

0

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.

answered Sep 23 '21 at 07:22

Sonia Pahuja

1
2

Please add some code. – Muhammedogz Sep 23 '21 at 08:42

score 0 · Answer 5 · answered Mar 19 '22 at 23:10

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.

Pseudo element not showing in react

5 Answers5