Style does not affect input in Ionic 3 - html

Question

I am trying create a login page for my app. But style does not work as I wish, here is the photo from problem
1
Here is the login.html codes
<ion-content class="app-content padding main-bg text-center">
<div class="logo animated pulse infinite">
<img src="../../assets/imgs/logo1.png" />
</div>
<form class="app-form">
<div class="list list-inset">
<label class="item item-input sec-main-text">
<input type="text" class="text-center" placeholder="username">
</label>
<label class="item item-input sec-main-text">
<input type="password" class="text-center" placeholder="Password">
</label>
</div>
<button class="button button-block button-clear main-btn main-bg-color" ng-click="goto('/app/home')">Login</button>
Register
<p class="forget" ng-click="forget_password()">Forget Password?</p>
</form>
</ion-content>
Here is the login.scss codes
.app-form .list-inset {
margin-left: 0;
margin-right: 0;
background: none;
}
.app-form {
.item-input {
margin-bottom: 20px;
background: none;
border: 1px solid;
border-radius: 30px;
padding: 5px 10px;
}
.list-inset .item {
border-radius: 30px;
height: 46px;
&.item-input input {
padding: 0;
color: white;
}
}
input {
&::-webkit-input-placeholder, &:-moz-placeholder {
color: white;
text-transform: capitalize;
}
}
}
.app-form .item-select {
select {
width: 100%;
max-width: 100%;
background: none;
text-align-last: center;
padding: 0;
text-align: -moz-center;
text-align: -webkit-center;
text-align-last: -moz-center;
text-align-last: -webkit-center;
direction: ltr;
}
&:after {
top: 60%;
right: 55px;
}
}
And here is the what I want from original login.html :)
2
And from original html's browser screenshot
3
And from my app's browser screenshot
4
Thanks for your helping :)
EDIT
After change html tags with ion tags

Answer 1

Ionic introduces and uses their own tags, for example, which has default styles added to it. It seems that you are using standard tags in your app such as and . Change your input to something like
<ion-item>
<ion-label>Username</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
and things shall work smoother.
Ionic is fun to learn because it is easy. Have a visit the Official Doc to see how you can make things easier. With the proper syntax, you will not less styling rules.