I’ve got some simple input components:
My page looks like this at the moment:
I’d simply like to change the color of the underline rectangles under the input fields. But I can’t figure out how I’d do this
Could someone help me with this?
Look in the source for SCSS variables. In this case, I would expect you might find something useful in
I’m sorry, but I still couldn’t figure out how to get it done. Could you help me with an example perhaps?
I think he means this variable
I put this in my variables.scss
// App Theme
// Ionic apps can have different themes applied, which can
// then be future customized. This import comes last
// so that the above variables are used and Ionic’s
// default are overridden.
Hi thanks for the fast response!
That’s where I started my quest to find the answer. I searched the input variables but couldn’t find something like “border”.
Doesn’t the text-input-highlight-color just change the color when selected? I’d want to change it on render
I tried all these with “color” in the name
But did any of them change the original color?
My basic color is a sort of blue, then I can’t use the typical green
Hi, I’m sorry to bother you again, but I’ve changed it in the exact same file as you did and just copy pasted your code but I can’t see any changes. Am I missing something?
color: #3df5d6 !important;
Only change your “primary” color in you variables.scss under theme folder
Are there any documents that summarize these variables? I am not looking for variables that override ionic defaults in variables.css. I want to be able to make changes in a page’s CSS to the highlight colour of an input field but do not want to change the global settings of the app.
I want to be able to override variables.css settings on specific pages for the input field but I couldn’t find anywhere how to do this on a given page’s CSS file. There are also no documents.
Yes, there is no documents for this. You have to find the class applied on the element using Inspect Element and override it in the page’s css.
Thanks… Sorry newbie here… Can I use Inspect Element when testing with ionic serve on a browser? I will give it a try.
Put below code into variables.css file.
$text-input-highlight-color-valid:rgba(0, 0, 255, 0);
$text-input-highlight-color-invalid:rgba(0, 0, 255, 0);
Please give your color here “rgba(0, 0, 255, 0);”.
Let me know if you still face issue.
This worked for me in Ionic5 - in my case I had a field that I needed closed for update, and although
readonly inhibited keying into the field, I also wanted the valid/invalid bottom border color to be inhibited as well. I didn’t want to use
protected as it faded the label and text more than I wanted, so I added my own CSS class
closed to the item level
In global.css I added
I hope this helps