Checkbox is showing two

I applied custom css on my checkbox but now it is showing two.. When I just apply the custom css to the previous one it doesn't apply them. Can anyone help fixing it?

.treejs-checkbox {
  width: 25px;
  height: 25px;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: 100px;
  background-color: #FFF;
  border: 2px solid #00EA90;
  box-shadow: 0px 0px 0px 0px #00EA90 inset;
  transition: all 0.15s cubic-bezier(0, 1.05, 0.72, 1.07);
}

<li>
  <span class="treejs-checkbox"></span>
  <span class="treejs-label">Teams</span>
</li>

It just shows double checkboxes. It shows like this.