: before selector arrow

Question

Hello i'm trying to make an up arrow like this:

but i got this :

I am not able to rotate the direction of the arrow I already tried to change the rotate to 360, 90 and it doesn't work I'm not able to do something like the image I posted

const data = [
      {
        id: 1,
        name: "SIMPLES NACIONAL – MEI",
        funcionarioIncrease: 49.99,
        maxFuncionario: 1,
        socioIncrease: 0,
        maxSocio: 5,
        FATURAMENTO: [
          {
            name: "ATÉ 30.000,00",
            value: 49.99,
          },
          {
            name: "De 30.001,00 a 50.000,00 ",
            value: 99.99,
          },
        ],
      },
      {
        id: 2,
        name: "SIMPLES NACIONAL – SERVIÇOS",
        funcionarioIncrease: 25,
        maxFuncionario: 3,
        socioIncrease: 25,
        maxSocio: 5,
        FATURAMENTO: [
          {
            name: "ATÉ 30.000,00",
            value: 149.99,
          },
          {
            name: "De 30.001,00 a 50.000,00 ",
            value: 199.99,
          },
        ],
      },
    ];

    function createInput(id, value) {
      var inputRadio = document.createElement("input");

      if (id && value) {
        inputRadio.id = value;
        inputRadio.name = "category";
        inputRadio.type = "radio";
        inputRadio.value = value;
        inputRadio.classList.add("radio");
        return inputRadio;
      }
      return null;
    }

    function createOptions() {
      const container = document.querySelector(".options-container");
      data.forEach((value) => {
        const optionDiv = document.createElement("div");
        optionDiv.classList.add("option");
        container.append(optionDiv);
        const input = createInput(value.name, value.id);
        if (!input) {
          return null;
        }
        optionDiv.append(input);
        var label = document.createElement("label");
        label.htmlFor = value.id;
        label.innerHTML = value.name;
        optionDiv.append(label);
      });
    }

    function initalize() {
      createOptions();
      const selected = document.querySelector(".selected");
      const optionsContainer = document.querySelector(".options-container");
      const optionsList = document.querySelectorAll(".option");

      selected.addEventListener("click", () => {
        optionsContainer.classList.toggle("active");
      });

      optionsList.forEach((o) => {
        o.addEventListener("click", () => {
          let input = o.querySelector("input").id;
          selected.innerHTML = o.querySelector("label").innerHTML;
          selected.setAttribute("data-value", input);
          optionsContainer.classList.remove("active");
        });
      });
    }


    initalize();

.select-box {
  display: flex;
  width: 100%;
  max-height: 50px;
  flex-direction: column;
  position: relative;
  z-index: 2;
}

.select-box .options-container {
  background: #2f3640;
  color: #f5f6fa;
  max-height: 0;
  width: 100%;
  opacity: 0;
  transition: all 0.4s;
  border-radius: 8px;
  overflow: hidden;
  position: absolute;
  order: 1;
  top: 100%;
  z-index: 2;
}
.select-box .options-container::before {
  position: absolute;
  display: block;
  content: "";
  bottom: 100%;
  right: 25px;
  width: 7px;
  height: 7px;
  margin-bottom: -4px;
  border-top: 1px solid #b5b5b5;
  border-left: 1px solid #b5b5b5;
  background: blue;
  transform: rotate(45deg);
  transition: all 0.4s ease-in-out;
}
.selected {
  background: #2f3640;
  border-radius: 8px;
  margin-bottom: 8px;
  color: #f5f6fa;
  position: relative;

  order: 0;
}

.selected::after {
  position: absolute;
  display: block;
  content: "";
  width: 10px;
  height: 10px;
  top: 50%;
  right: 25px;
  margin-top: -3px;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: rotate(45deg) translateY(-50%);
  transition: all 0.4s ease-in-out;
  transform-origin: 50% 0;
  transition: all 0.4s;
}

.select-box .options-container.active {
  max-height: 240px;
  opacity: 1;
}

.select-box .options-container.active + .selected::after {
  margin-top: 3px;
  transform: rotate(-135deg) translateY(-50%);
}

.select-box .options-container::-webkit-scrollbar {
  width: 8px;
  background: #0d141f;
  border-radius: 0 8px 8px 0;
}

.select-box .options-container::-webkit-scrollbar-thumb {
  background: #525861;
  border-radius: 0 8px 8px 0;
}

.select-box .option,
.selected {
  padding: 12px 24px;
  cursor: pointer;
}

.select-box .option:hover {
  background: #414b57;
}

.select-box label {
  cursor: pointer;
  color: white;
}

.select-box .option .radio {
  display: none;
}

<div class="inputs_container">
              <div class="service_mode flex">
                <div class="select-box">
                  <div class="options-container"></div>

                  <div class="selected">
                    Select Video Category
                  </div>
                </div>
  </div>

if anyone can help me i would be grateful the css class I'm trying to add to the arrow is this:

.select-box .options-container::before

Answer 1

Here is one I think I made it clear the change is not hard to see mean that you will see where I made it but let me make something clear I removed width and height and alter the border-top to 10px solid transparent and border-right from 10px solid green to 10px solid #2f3640 to make its appearance so good

const data = [{
    id: 1,
    name: "SIMPLES NACIONAL – MEI",
    funcionarioIncrease: 49.99,
    maxFuncionario: 1,
    socioIncrease: 0,
    maxSocio: 5,
    FATURAMENTO: [{
        name: "ATÉ 30.000,00",
        value: 49.99,
      },
      {
        name: "De 30.001,00 a 50.000,00 ",
        value: 99.99,
      },
    ],
  },
  {
    id: 2,
    name: "SIMPLES NACIONAL – SERVIÇOS",
    funcionarioIncrease: 25,
    maxFuncionario: 3,
    socioIncrease: 25,
    maxSocio: 5,
    FATURAMENTO: [{
        name: "ATÉ 30.000,00",
        value: 149.99,
      },
      {
        name: "De 30.001,00 a 50.000,00 ",
        value: 199.99,
      },
    ],
  },
];

function createInput(id, value) {
  var inputRadio = document.createElement("input");

  if (id && value) {
    inputRadio.id = value;
    inputRadio.name = "category";
    inputRadio.type = "radio";
    inputRadio.value = value;
    inputRadio.classList.add("radio");
    return inputRadio;
  }
  return null;
}

function createOptions() {
  const container = document.querySelector(".options-container");
  data.forEach((value) => {
    const optionDiv = document.createElement("div");
    optionDiv.classList.add("option");
    container.append(optionDiv);
    const input = createInput(value.name, value.id);
    if (!input) {
      return null;
    }
    optionDiv.append(input);
    var label = document.createElement("label");
    label.htmlFor = value.id;
    label.innerHTML = value.name;
    optionDiv.append(label);
  });
}

function initalize() {
  createOptions();
  const selected = document.querySelector(".selected");
  const optionsContainer = document.querySelector(".options-container");
  const optionsList = document.querySelectorAll(".option");

  selected.addEventListener("click", () => {
    optionsContainer.classList.toggle("active");
  });

  optionsList.forEach((o) => {
    o.addEventListener("click", () => {
      let input = o.querySelector("input").id;
      selected.innerHTML = o.querySelector("label").innerHTML;
      selected.setAttribute("data-value", input);
      optionsContainer.classList.remove("active");
    });
  });
}


initalize();

.select-box {
  display: flex;
  width: 100%;
  max-height: 50px;
  flex-direction: column;
  position: relative;
  z-index: 2;
}

.select-box .options-container {
  background: #2f3640;
  color: #f5f6fa;
  max-height: 0;
  width: 100%;
  opacity: 0;
  transition: all 0.4s;
  border-radius: 8px;
  /*overflow: hidden;*/
  position: absolute;
  order: 1;
  top: 100%;
  z-index: 2;
}

.select-box .options-container::before {
  position: absolute;
  display: block;
  content: "";
  bottom: 100%;
  right: 25px;
  /*width: 7px;
  height: 7px;*/
  margin-bottom: -6px;
  border-top: 10px solid transparent;
  border-right: 10px solid #2f3640/*green*/
  ;
  /*background: blue;*/
  transform: rotate(225deg);
  transition: all 0.4s ease-in-out;
}

.selected {
  background: #2f3640;
  border-radius: 8px;
  margin-bottom: 8px;
  color: #f5f6fa;
  position: relative;
  order: 0;
}

.selected::after {
  position: absolute;
  display: block;
  content: "";
  width: 10px;
  height: 10px;
  top: 50%;
  right: 25px;
  margin-top: -3px;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: rotate(45deg) translateY(-50%);
  transition: all 0.4s ease-in-out;
  transform-origin: 50% 0;
  transition: all 0.4s;
}

.select-box .options-container.active {
  max-height: 240px;
  opacity: 1;
}

.select-box .options-container.active+.selected::after {
  margin-top: 3px;
  transform: rotate(-135deg) translateY(-50%);
}

.select-box .options-container::-webkit-scrollbar {
  width: 8px;
  background: #0d141f;
  border-radius: 0 8px 8px 0;
}

.select-box .options-container::-webkit-scrollbar-thumb {
  background: #525861;
  border-radius: 0 8px 8px 0;
}

.select-box .option,
.selected {
  padding: 12px 24px;
  cursor: pointer;
}

.select-box .option:hover {
  background: #414b57;
}

.select-box label {
  cursor: pointer;
  color: white;
}

.select-box .option .radio {
  display: none;
}

<div class="inputs_container">
  <div class="service_mode flex">
    <div class="select-box">
      <div class="options-container"></div>

      <div class="selected">
        Select Video Category
      </div>
    </div>
  </div>

and if you find any bug in the code please let me know if there could be any further help