可以使用 Ionic 更改 iOS 选择输入的字体大小

Posted 2023-02-23

【中文标题】可以使用 Ionic 更改 iOS 选择输入的字体大小

【英文标题】：Possible to change font size of iOS select input using Ionic

【发布时间】：2017-07-13 10:42:28

【问题描述】：

我有一个正在 Ionic 中工作的项目，客户询问是否可以减小所选输入的字体大小。

这是一张来自 Google 的随机图片，但显示了我正在引用的 ios 上的选择“滚动条”：

蓝色、绿色和红色选项需要较小的字体大小。我很确定它不能完成，对我来说也更容易。

【参考方案1】：

您没有说明您使用的是哪个版本的 ionic，所以我假设它是最新版本。

ionic 中的每个组件都分配了 sass 变量，这些变量可用于定位组件的特定元素，然后可用于相应地对其进行样式设置。

在您的theme/variables.scss 文件中，您可以定位一个变量，然后该变量将覆盖默认样式。在您的情况下，这将是选择的字体大小。现在对于这个用例，字体大小是一个继承属性，并且没有分配给它特定的 sass 变量（您可以查看 select here 的所有 sass 变量）

因此，在这种情况下，要覆盖默认样式，您必须使用

显式包装您的 scss 代码

.ios,.md,.wp
    // your style here

从您的图像看来，您使用的是“操作表选择”样式。这将针对 .action-sheet-ios .action-sheet-button 类来更改字体大小。

.ios
    .action-sheet-ios .action-sheet-selected,
    .action-sheet-ios .action-sheet-button
         font-size:1rem;
     

这专门针对ios。

【参考方案2】：

这可以通过 css 完成。首先通过实验室为您的应用提供服务

ionic serve --lab

比检查 chrome 中的元素并选择您的文本组件并找到它的类。然后您可以添加自定义 CSS 样式。

干杯：D