Change font-size in an Ionic input text-area

Question

I can't seem to change the font-size for the Ionic input. I've tried

input {
    font-size: 30px;
}

but that doesn't work. However,

input {
    font-family: Times;
}

works, so I don't know what exactly is the problem. I can't even change the height of the input as

input {
    height:100px;
}

does not work.

However, when I take out the line in my HTML referencing the Ionic CSS, (lib\\ionic\\css\\ionic.css), my CSS works. I think my CSS should be overriding the Ionic CSS as my CSS comes after it, so what's happening, and how do I fix it?

EDIT:

Even if I put !important, it doesn't work. Interestingly enough,

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

makes it so that the font doesn't change, while

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

does change the font.

EDIT2: The problem was with selector specificity:

 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;
}

was overriding it, so I just changed my CSS to

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

and it worked!

Answer 1

It is very likely that the specificity stated in the framework is greater than what you are providing in your CSS.

Using dev tools to track down the specific style by inspecting the element should show you how the framework defined its selector.

As some have mentioned, using !important could solve this, but it is not a recommended solution as it cheat its way to the max specificity and can't be overwritten later on, except by being more specific with a selector and including the important statement.

Answer 2

您需要在分号前加!important 。