Css 选择选项右边距不起作用

我想在图标字体和选项项之间留一个空白。可以使用空格来实现这一点，但我希望在选项元素的右边留一个边距，如下所示：

select
{
  padding: 10px;
  width: 100%;
}

select{
  border: 0;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.select_category,
 {
  position: relative;
}

.select_category{
  border-left: 2px solid red;
  border-top: 2px solid red;
  border-bottom: 2px solid red;
}


.select_category:before {
  content: "\f0ca";
  font-family: 'FontAwesome';
  position: absolute;
  left: 0;
  font-size: 1em;
  z-index: 1;
  color: green;
  padding: 15px 18px;

}

.select_category option{
  margin-right:10px;
}

但它不起作用。你知道为什么吗

---

示例：

您可以使父级

flex

将所有内容排成一行，然后您的页边距就可以工作了。移除伪元素上的

绝对

定位，并将

选择

设置为

flex grow:1

，以消耗可用空间。如果使容器太高，请删除伪元素上的垂直填充

选择{
填充：10px；
柔性生长：1；
}
挑选{
边界：0；
外观：无；
-moz外观：无；
-webkit外观：无；
光标：指针；
}
.选择您的类别{
位置：相对位置；
}
.选择您的类别{
左边框：2倍纯红；
边框顶部：2件纯红；
底部边框：2倍纯红；
显示器：flex；
对齐项目：居中；
}
.选择_类别：之前{
内容：“\f0ca”；
字体系列：“FontAwesome”；
字号：1em；
z指数：1；
颜色：绿色；
填充：15px 18px；
}
.选择_类别：之后{
内容：“\F0D7”；
字体系列：“FontAwesome”；
颜色：#d2d6df！重要；
字号：2em；
z指数：1；
颜色：#00af87；
填充：15px 18px；
}

项目
一个
两个
三

您可以让父级

flex

将所有内容排成一行，这样您的页边距就可以工作了。移除伪元素上的

绝对

定位，并将

选择

设置为

flex grow:1

，以消耗可用空间。如果使容器太高，请删除伪元素上的垂直填充

选择{
填充：10px；
柔性生长：1；
}
挑选{
边界：0；
外观：无；
-moz外观：无；
-webkit外观：无；
光标：指针；
}
.选择您的类别{
位置：相对位置；
}
.选择您的类别{
左边框：2倍纯红；
边框顶部：2件纯红；
底部边框：2倍纯红；
显示器：flex；
对齐项目：居中；
}
.选择_类别：之前{
内容：“\f0ca”；
字体系列：“FontAwesome”；
字号：1em；
z指数：1；
颜色：绿色；
填充：15px 18px；
}
.选择_类别：之后{
内容：“\F0D7”；
字体系列：“FontAwesome”；
颜色：#d2d6df！重要；
字号：2em；
z指数：1；
颜色：#00af87；
填充：15px 18px；
}

项目
一个
两个
三

您应该在

上使用
左侧填充
。选择

。

.select\u category:before

元素（包含菜单图标）具有绝对位置，因此它的边距不会影响任何其他元素的位置

---

您应该在

上使用
左侧填充。选择
。
.select\u category:before
元素（包含菜单图标）具有绝对位置，因此它的边距不会影响任何其他元素的位置