如何更改箭头大小

Question

我正在使用 Bootstrap 日期选择器，我更改了它的大小，因为它太小了。我使用了以下 css:

.ui-datepicker.ui-widget.ui-widget-content{
    font-size: 45px !important;
    max-height: fit-content !important;
  }

但是，现在更改月份的箭头与小部件的其他所有内容相比太小了。

我的问题是我无法更改大小。我尝试如下更改 ui-icon 的 width 和 height。

.ui-icon{
    width: 32px //double than before
    height: 32px //double than before
}

但它只是显示了更多图标：

令人惊讶的是，我找不到任何类似的主题。

有什么帮助吗？

Answer 1

我觉得这里有'font-size'问题。从检查模式检查箭头字体大小并增加字体大小。

Answer 2

如果箭头是图片那么你可以把图片的宽度调高一些。

.ui-datepicker.ui-widget.ui-widget-content img{
width: suitable width;
  }

希望能帮助您回答您的问题

Answer 3

此小部件似乎将所有图标用作 css 精灵（link 此处：https://code.jquery.com/ui/1.12.1/themes/base/images/ui-icons_444444_256x240.png）- 因此所有图标都放置在一个大图像网格中，图标由background-position 属性，仅显示需要的剪辑图标。更改 font-size、background-size 无济于事。您需要使用很少的数学运算，并且每次 width/height 更改都会重新计算 sprited 图标的缩放坐标（正确 background-size 和 background-position 以精确适合图标。恕我直言，这是在浪费时间，我会使用一些不同的图标，图像、背景图像或字体图标

如何更改箭头大小

How to change arrows size

css

bootstrap-datepicker