如何从下拉列表中旋转/旋转180‘插入符号，最好只使用CSS？

要实现从下拉列表中旋转/旋转180°插入符号，可以使用CSS的transform属性来实现。具体步骤如下：

首先，创建一个下拉列表的HTML结构，可以使用<select>和<option>标签来创建。

<select>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

使用CSS来设置下拉列表的样式，并添加旋转效果。可以使用transform属性来实现旋转，使用transition属性来添加过渡效果。

select {
  appearance: none; /* 隐藏默认样式 */
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: transparent; /* 设置背景透明 */
  border: none; /* 去除边框 */
  padding: 5px; /* 设置内边距 */
  font-size: 16px; /* 设置字体大小 */
  cursor: pointer; /* 设置鼠标样式为手型 */
  outline: none; /* 去除选中时的外边框 */
  transition: transform 0.3s; /* 添加过渡效果 */
}

select:hover {
  transform: rotate(180deg); /* 鼠标悬停时旋转180° */
}

最后，可以根据需要自定义插入符号的样式，例如使用伪元素::after来添加一个箭头图标。

select::after {
  content: ""; /* 添加内容 */
  position: absolute; /* 设置绝对定位 */
  top: 50%; /* 设置垂直居中 */
  right: 10px; /* 设置距离右侧的位置 */
  width: 0; /* 设置宽度为0 */
  height: 0; /* 设置高度为0 */
  border-left: 5px solid transparent; /* 设置左边框为透明 */
  border-right: 5px solid transparent; /* 设置右边框为透明 */
  border-top: 5px solid #000; /* 设置上边框为实线黑色 */
  transform: translateY(-50%); /* 垂直居中 */
  transition: transform 0.3s; /* 添加过渡效果 */
}

select:hover::after {
  transform: translateY(-50%) rotate(180deg); /* 鼠标悬停时旋转180° */
}

这样，当鼠标悬停在下拉列表上时，插入符号会旋转180°。你可以根据需要自定义样式和动画效果。

注意：以上代码只是一个示例，具体样式和效果可以根据实际需求进行调整。另外，腾讯云相关产品和产品介绍链接地址请参考腾讯云官方网站。