Demo input css

[thomas-tran]

How can I change the background color of the ion-md-input , it seems that ionic material set the background to black by default and I am unable to change it even I copy the stylesheet from ion-md-input itself.

[mhartington]

ion-md-input author here, you should be able to pass a highlight color to the directive.

https://github.com/mhartington/ion-md-input#usage

<ion-md-input placeholder="Name" hightlight-color="energized" type="text"></ion-md-input>

[thomas-tran]

Hi

My default color is white on the background page therefore I need change to style to white background color of the input box and the floating label to dark color.

What I mean is the background color of the input text, at the moment it set to dark #444 in your style.css and I could not change the style unless overwrite your css.

The hightlight-color is just change the underline color of the input text and it did not change the background of the input.

[sangregoriopaolo]

Same issue for me

[mhartington]

So, I'm not sure I follow. Are you talking about the background color of the inputs or the text-color of the label? Either of the two can be overwritten with your own css, so I'm not sure this is much of an issue.

http://codepen.io/mhartington/pen/zGNrzV

It just would require you to write your own css to fit your needs.

[sangregoriopaolo]

Hi, actually, including your css, and following the instructions on ion-md-input to use it, I get this

[mhartington]

Any way you could put together a codepen demo? Something else must be happening here that I'm not aware of

[thomas-tran]

Hi ,

I means the background of the input, how can you change it to dark color to white color? Also, the input floating label as well.

I used bower to install to my application and reference the css and js, however I could not find any document how to change the style of those input.

Thanks Thomas

[rbutera]

Codepen or Plunkr please On Fri, 29 May 2015 at 00:36, Thomas Tran [email protected] wrote:

Hi ,

I means the background of the input, how can you change it to dark color to white color? Also, the input floating label as well.

I used bower to install to my application and reference the css and js, however I could not find any document how to change the style of those input.

Thanks

Thomas

— Reply to this email directly or view it on GitHub https://github.com/zachsoft/Ionic-Material/issues/74#issuecomment-106629474 .

[rbutera]

Please demonstrate this issue with a codepen

[sliontc]

It likes the ionic-material conflict with ion-md-input.

[sliontc]

ionic-material overrides the ion-md-input.

[sliontc]

Just include both ionic-material and ion-md-input to reproduce the issue.

[sliontc]

Any feedback？

[liuwenzhuang]

Yes, if use ionic-material and ion-md-input together, the background of ion-md-input will change.

[mmaask]

.item-md-label input classes conflict. Need custom override to fix.

[adskiremote]

Hi - I've added a new directive to the ion-md-input. This now resets the style. If you want to use without Ionic Material styling just use like this:

My fork here: https://github.com/adskiremote/ion-md-input

[mhartington]

Pretty sure this was fixed in my original repo, just this repo was pulling an older version

[adskiremote]

Hi Mike, ah sorry didn't realise. Thought the other was the updated. Thanks for that as I'll update mine and check :-)

[costin-moraru]

1 add via bower ionic-material and ion-md-input. 2 in bower component ion-md-input open bower.json and modify main like that "main": [ "ion-md-input.js", "css/ion-md-input.css" ], 3 open ionic-material.css in bower components and comment all row in section /* Directives : MD Label. 4 add this to you css .item-md-label input { border-bottom: 1px solid #757575 !important; width: 100% !important; }

.item-md-label { padding-right: 10px !important; padding-left: 10px !important; }