I want to have an ::after element on my select element.
This answer (https://stackoverflow.com/a/48992364/10551293) says that I cannot have ::after or ::before on input elements, does the select tag count as an input element? (It's not an though)
The following doesn't work:
select::after {
content: "hello";
}
How would I do this (without jQuery, preferably without javascript as well)?
.caja {
margin:20px auto 40px auto;
border:1px solid #d9d9d9;
height:30px;
overflow: hidden;
width: 230px;
position:relative;
}
select {
background: transparent;
border: none;
font-size: 14px;
height: 30px;
padding: 5px;
width: 250px;
}
select:focus{ outline: none;}
.caja::after{
content:"\025be";
display:table-cell;
padding-top:7px;
text-align:center;
width:30px;
height:30px;
background-color:#d9d9d9;
position:absolute;
top:0;
right:0px;
pointer-events: none;
}<div class="caja">
<select>
<option>La primera opción</option>
<option>La segunda opción</option>
<option>La tercera opción</option>
</select>
</div>