Text input field style options?

Ionic Framework ionic-v3
1

Hello, is there an easy way to display input fields more like the following (see first screenshot), versus the default look (second screenshot)?

image
new_form.png554Ă—506 17.4 KB

image
old_form.jpg1156Ă—826 72.5 KB

1 Like
2

hi there, so you want the padding or the label on top? or both?

3

Hey… label and padding yes - that part I can sort out. I guess I more was asking about the input field itself… how it has the rounded border styling vs straight lines across. Was just wondering if there were some ionic styling examples for that out there.

4

Hey, you could do this

::HTML::

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div id="container">
    <ion-list>

      <ion-item id="rounded">
        <ion-label fixed>Username</ion-label>
        <ion-input type="text" value=""></ion-input>
      </ion-item>

      <ion-item id="rounded">
        <ion-label fixed>Username</ion-label>
        <ion-input type="text" value=""></ion-input>
      </ion-item>     

    </ion-list>
  </div>
</ion-content>

::SCSS::

page-home {
    
    #rounded {
        width: 100%;
        height: 100px;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        border-radius: 10px;
        margin-bottom: 10px;  
    }

    #container {
        width: 300px; 
        margin-left:auto; 
        margin-right: auto; 
    }

}

But you will find a graphical bug, I think it’s because of the way that ionic groups up ion-items, or basically just the way you are setting it up… play around with it!!

by the way, you can check better the behavior of the elements with a background

background-color: grey;

Hope it helps…

5

I’ll try it out. Thank you, Ricardo!!

6

on getting focus on that particular input , how we can change the border color of that particular ion-item

7

didi you find a working solution for this?