如何在 <select> 上添加 ::after 元素？ [复制]

【问题标题】：How do I add an ::after element on a <select>? [duplicate]如何在 <select> 上添加 ::after 元素？ [复制]
【发布时间】：2020-05-17 01:38:14
【问题描述】：

我想在我的选择元素上有一个 ::after 元素。

这个答案 (https://stackoverflow.com/a/48992364/10551293) 说我不能在输入元素上有 ::after 或 ::before，选择标记是否算作输入元素？（虽然不是）

以下不起作用：

select::after {
    content: "hello";
}

我将如何做到这一点（没有 jQuery，最好也没有 javascript）？

【问题讨论】：

看看这篇文章。可能这对你有用。 stackoverflow.com/a/25574218/8732191

标签： html css drop-down-menu

【解决方案1】：

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

problem with <select> and :after with CSS in WebKit

【讨论】：