Swiper.js导航箭头无法调整大小，CSS设置无效求助

直接给.swiper-button-next/.swiper-button-prev设置width和height没用，因为这些属性仅控制箭头按钮的点击区域大小，实际箭头图标是通过伪元素（::after）或内置SVG实现的，得针对图标本身调整：

方法1：用transform缩放（最简单通用） #

直接对按钮整体缩放，同时保留点击区域的适配性：

.swiper-button-next,
.swiper-button-prev {
  color: white !important;
  /* 0.5表示缩小到原大小的50%，按需调整比例 */
  transform: scale(0.5) !important;
}

方法2：针对Swiper 6+版本（默认字体箭头） #

新版Swiper的箭头是通过伪元素的字体图标实现的，要修改伪元素的font-size来控制图标大小，同时可调整按钮本身的宽高匹配点击区域：

.swiper-button-next,
.swiper-button-prev {
  color: white !important;
  /* 调整按钮点击区域的大小 */
  width: 30px !important;
  height: 30px !important;
}

/* 控制箭头图标的实际大小 */
.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 10px !important;
  color: white !important;
}

方法3：使用自定义SVG箭头的情况 #

如果你的箭头是自定义SVG，直接给SVG标签设置宽高即可：

.swiper-button-next svg,
.swiper-button-prev svg {
  width: 10px !important;
  height: 10px !important;
  fill: white !important;
}

内容的提问来源于stack exchange，提问作者Jaydendev