How extend or override style input.

[mynameiskreang]

Hello, I try to extend, override component and CSS. but it's not work.

I want to change your input style to right style. how can I do?

Thanks.

[bulat-f]

Hi @greedmonkey . Just use in css something like this:

.datepicker__input {
    border: 0 !important;
    border-bottom: .2rem solid !important;
    border-radius: 0 !important;
}

If you have this styles for other inputs already, you can override inline styles using !important there. For example:

input {
    border-bottom: .2rem solid !important;
}

[ibrcic]

The solution simply does not work for me. As a matter of fact no matter what I try the input styling remains the same. Any tips for me?

[HugRios]

you can go to datepicker.component.ts in this file you should find this and change the styles of input

.datepicker__input {
    outline: none;
    border-radius: 1.1rem;
    padding: .2em .6em;
    font-size: 14px;
  }

I hope this helped you

[mariogl]

Same issue here. If I override input styles inside my component, they are ignored. If I override them in a global stylesheet, then it works (not a clean solution for me).

I'm building the app with webpack (angular-cli).