如何更改箭頭大小

Question

我正在使用Bootstrap datepicker，我改變了它的大小，因為它太小了。 我使用了以下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

這個小部件似乎使用所有圖標作為css精靈（鏈接在這里： https ： //code.jquery.com/ui/1.12.1/themes/base/images/ui-icons_444444_256x240.png ） - 所以所有圖標都放在一個大圖像網格和圖標由background-position屬性確定，后者只顯示所需的剪切圖標。 更改font-size ， background-size將無濟於事。 您需要使用少量數學，並且每個width / height變化都會重新計算精簡圖標的縮放坐標（正確的background-size和background-position以精確地擬合圖標。這不是浪費時間而是我會使用一些不同的圖標，圖像，或背景圖像或字體圖標

Answer 2

我想這里'font-size'問題。 從檢查模式檢查箭頭字體大小並增加字體大小。

Answer 3

如果箭頭是圖像，則可以將圖像的寬度設置得更高。

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

希望能幫助您回答您的問題