Javascript ：在选择器箭头之前

您好，我正在制作一个向上箭头，如下所示：

但我明白了：

我无法旋转箭头的方向 我已经尝试将旋转更改为360，90 它不起作用，我不能像我贴的图片那样做

const数据=[
{
id:1，
名称：“SIMPLES NACIONAL–MEI”，
函数增加：49.99，
MaxFunctionario:1，
社会增长率：0，
马克斯：5，
法图拉门托：[
{
名称：“ATÉ30.000,00”，
价值：49.99，
},
{
名称：“De 30.001,00 a 50.000,00”，
数值：99.99，
},
],
},
{
id:2，
名称：“简化国家服务”，
功能增加：25，
MaxFunctionario:3，
社会增长：25，
马克斯：5，
法图拉门托：[
{
名称：“ATÉ30.000,00”，
价值：149.99，
},
{
名称：“De 30.001,00 a 50.000,00”，
价值：199.99，
},
],
},
];
函数createInput（id、值）{
var inputRadio=document.createElement（“输入”）；
if（id&&value）{
inputRadio.id=值；
inputRadio.name=“类别”；
inputRadio.type=“无线电”；
inputRadio.value=值；
inputRadio.classList.add（“收音机”）；
返回输入；
}
返回null；
}
函数createOptions（）{
const container=document.querySelector（“.options container”）；
data.forEach（（值）=>{
const optionDiv=document.createElement（“div”）；
optionDiv.classList.add（“选项”）；
容器。附加（optionDiv）；
const input=createInput（value.name，value.id）；
如果（！输入）{
返回null；
}
选项IV.追加（输入）；
var label=document.createElement（“标签”）；
label.htmlFor=value.id；
label.innerHTML=value.name；
选项IV.附加（标签）；
});
}
函数初始化（）{
createOptions（）；
const selected=document.querySelector（“.selected”）；
const options container=document.querySelector（“.options container”）；
const optionsList=document.querySelectorAll（“.option”）；
已选定。addEventListener（“单击”，（）=>{
选项container.classList.toggle（“活动”）；
});
选项列表。forEach（（o）=>{
o、 addEventListener（“单击”，（）=>{
让输入=o.querySelector（“输入”）.id；
selected.innerHTML=o.querySelector（“标签”）.innerHTML；
selected.setAttribute（“数据值”，输入）；
选项container.classList.remove（“活动”）；
});
});
}
初始化（）
。选择框{
显示器：flex；
宽度：100%；
最大高度：50px；
弯曲方向：立柱；
位置：相对位置；
z指数：2；
}
.选择框.选项容器{
背景：#2f3640；
颜色：#f5f6fa；
最大高度：0；
宽度：100%；
不透明度：0；
过渡：全部为0.4s；
边界半径：8px；
溢出：隐藏；
位置：绝对位置；
顺序：1；
最高：100%；
z指数：2；
}
.选择框.选项容器：：之前{
位置：绝对位置；
显示：块；
内容：“；
底部：100%；
右：25px；
宽度：7px；
高度：7px；
保证金底部：-4px；
边框顶部：1px实心#b5；
左边框：1px实心#b5；
背景：蓝色；
变换：旋转（45度）；
过渡：所有0.4缓进缓出；
}
.选定{
背景：#2f3640；
边界半径：8px；
边缘底部：8px；
颜色：#f5f6fa；
位置：相对位置；
顺序：0；
}
.所选：：之后{
位置：绝对位置；
显示：块；
内容：“；
宽度：10px；
高度：10px；
最高：50%；
右：25px；
利润上限：-3px；
边框底部：1px实心#fff；
右边框：1px实心#fff；
变换：旋转（45度）translateY（-50%）；
过渡：所有0.4缓进缓出；
变换原点：50%0；
过渡：全部为0.4s；
}
.选择框。选项-container.active{
最大高度：240px；
不透明度：1；
}
.选择框。选项-container.active+。选择：：之后{
利润上限：3倍；
变换：旋转（-135度）平移（-50%）；
}
.选择框。选项容器：-webkit滚动条{
宽度：8px；
背景：#0d141f；
边界半径：0 8px 8px 0；
}
.选择框。选项容器：-webkit滚动条拇指{
背景：#525861；
边界半径：0 8px 8px 0；
}
.选择框。选项，
.选定{
填充：12px 24px；
光标：指针；
}
。选择框。选项：悬停{
背景：414b57；
}
.选择框标签{
光标：指针；
颜色：白色；
}
.选择框.选项.收音机{
显示：无；
}

选择视频类别
这里有一个我想我已经说得很清楚了这个变化不难看出意味着你会看到我在哪里做的，但是让我说清楚我删除了
宽度
和
高度
，并将
边框顶部
改为
10px实心透明
和
边框右侧
从
10px实心绿色
改为
10px固体#2f3640
使其外观如此美观


const数据=[{
id:1，
名称：“SIMPLES NACIONAL–MEI”，
函数增加：49.99，
MaxFunctionario:1，
社会增长率：0，
马克斯：5，
法图拉门托：[{
名称：“ATÉ30.000,00”，
价值：49.99，
},
{
名称：“De 30.001,00 a 50.000,00”，
数值：99.99，
},
],
},
{
id:2，
名称：“简化国家服务”，
功能增加：25，
MaxFunctionario:3，
社会增长：25，
马克斯：5，
法图拉门托：[{
名称：“ATÉ30.000,00”，
价值：149.99，
},
{
名称：“De 30.001,00 a 50.000,00”，
价值：199.99，
},
],
},
];
函数createInput（id、值）{
var inputRadio=documen