在Ionic输入文本区域中更改字体大小

Question

我似乎无法更改Ionic输入框的字体大小。我已经尝试过

input {
    font-size: 30px;
}

但那并不起作用。然而，

input {
    font-family: Times;
}

工作正常，所以我不知道问题到底出在哪里。我甚至无法更改输入框的高度。

input {
    height:100px;
}

不起作用。

然而，当我从HTML中删除引用Ionic CSS的行（lib\ionic\css\ionic.css）时，我的CSS起作用。 我认为我的CSS应该覆盖Ionic CSS，因为我的CSS在其后，那么发生了什么，我该如何解决？

编辑：

即使我使用!important，它也不起作用。有趣的是，

input {
     height:100px; !important
     font-family: Times;
}

使字体不改变，而

输入 { 字体：Times; 高度：100px; !important }

改变了字体。

编辑2：问题出在选择器的特异性方面：

 textarea, input[type="text"]... {
  display: block;
  padding-top: 2px;
  padding-left: 0;
  height: 34px;
  color: #111;
  vertical-align: middle;
  font-size: 14px;
  line-height: 16px;
}

之前我的CSS被覆盖了，所以我只是改变了CSS：

input[type="text"] {
font-size:30px;
}

并且它起作用了！

- user124577

---

永远不要使用 !important !! 这听起来像是选择器特异性的问题。当您检查元素时，开发工具会说什么？ - Hoshts

你是对的！textarea，input[type="text"]，input[type="password"]，... { display: block; padding-top: 2px; padding-left: 0; height: 34px; color: #111; vertical-align: middle; font-size: 14px; line-height: 16px; }正在显示。非常感谢！ - user124577

然后只需覆盖您需要的选择器即可。您还可以增加更多的特定性，例如父元素的类。这样加载顺序就不会真正重要了。 - Hoshts

是的！ - user124577

Answer 1

框架中所声明的样式选择器比你在CSS文件中提供的更为具体。

使用开发者工具来检查元素并追踪其具体的样式选择器，可以展示给你框架是如何定义它的。

一些人建议使用!important，虽然这可以解决问题，但并不推荐使用。因为它通过欺骗的方式获得了最大的优先级，而且后续无法被覆盖，除非你用一个更具体的选择器并包含important语句。

- Hoshts

Answer 2

你需要在分号之前加上！important。

- LouYu

---

如果可能的话，您不应该使用!important来覆盖样式。 CSS具有明确的特异性，跟踪它并不困难。 - Hoshts

但是，如果您正在使用Ionic并且不了解其提供的每种样式，则可能需要使用!important。 - Vasanth

Answer 3

如文档中所述https://ionicframework.com/docs/v6/api/textarea#theming，您不应尝试更改“input”或“textarea”的一般样式。相反，只需使用自定义类即可：

<ion-input class="myinputstyles" ....
<ion-textarea class="myinputstyles" ....

您可以在组件的 CSS 中更改所有所需的样式：

.myinputstyles {
  font-size: 30px;
}

- C. Gäking