【教學】美化行動版下拉式選單 調整選單文字和箭頭位置

後台「主題」→「編輯 HTML」

搜尋 .mobile .tabs-inner .PageList 找到以下內容

.mobile .tabs-inner .PageList .widget-content {
  background-color: $(tabs.selected.background.color);
  color: $(tabs.selected.text.color);
  border-top: $(tabs.border.width) solid $(tabs.border.color);
  border-bottom: $(tabs.border.width) solid $(tabs.border.color);
}

.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
  border-$startSide: 1px solid $(tabs.border.color);
}

修改為

.mobile .tabs-inner .PageList .widget-content {
  
  color: $(tabs.selected.text.color);
  border-top: $(tabs.border.width) solid $(tabs.border.color);
  border-bottom: $(tabs.border.width) solid $(tabs.border.color);
  padding: 0.3em 10px;

  height: 28px;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
  border-$startSide: 1px solid $(tabs.border.color);
  margin: -3px 0px;
}

background-color將背景改為白色；border-radius加入圓弧效果；padding的第一個數字調整文字上下位置，第二個數字調整文字左右位置；margin的第一個數字調整箭頭上下位置，第二個數字調整箭頭左右位置。

最後效果如圖所示：