CODEWITHSUNDEEP
cssionic-framework
user124577
user124577

Reputation: 209

Change font-size in an Ionic input text-area

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!

Upvotes: 3

Views: 11544

Answers (3)

C. Gäking
C. Gäking

Reputation: 163

As stated here https://ionicframework.com/docs/v6/api/textarea#theming in the docs you should not try to change general styles of "input" or "textarea". Instead simply use a custom class:

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

You can change all the needed styles in your component-css:

.myinputstyles {
  font-size: 30px;
}

Upvotes: 0

user1583190
user1583190

Reputation:

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 !importantcould 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.

Upvotes: 2

LouYu
LouYu

Reputation: 691

You need to put !important before semicolon.

Upvotes: 0

Related Questions