如何将样式化的div放置在select元素中？

Question

在我的博客上，我有一个样式div，可以在每个类别的前面显示一个彩色小圆圈，就像您在此处看到的一样：https://codedbytom.herokuapp.com/blog

现在，我要添加一个选择元素，以便人们可以选择仅显示一个类别的帖子。在此select元素内，我希望每个类别前面都带有彩色圆圈。我试图在其中放置相同的div，但这不起作用。

关于如何实现此目标的任何建议，甚至有可能自定义选择输入的内部？

这是我的代码：

<div class="form-group">
    <label for="categorySelect"></label>
    <select class="form-control col-sm-12 col-md-3" id="categorySelect">
      <option><div class="wdev tag">Web Development</option>
      <option><div class="wdes tag">Web Design</option>
      <option><div class="gdev tag">Game Development</option>
      <option><div class="pers tag">Personal</option>
      <option><div class="all tag">All categories</option>
    </select>
  </div>

和CSS（在.wdev，.wdes等类中指定的背景色。由于不重要，因此此处未包括）：

.tag {
  height: 12px;
  width: 12px;
  border-radius: 50%;
  display: inline-block;
}