how to make rounded input field in ionic?

Question

I am able to make input field with icon but I need the input field should be rounded corner ![enter image description here][1] and horizontally center width smaller as show in image . please check the below image

Please check my search bar is smaller in width and horizontally centered having rounded corner .can we make this in ionic

here is my code

 <ion-content>
       <div class="list list-inset">
  <label class="item item-input">
    <img src="https://dl.dropboxusercontent.com/s/n2s5u9eifp3y2rz/search_icon.png?dl=0">
    <input type="text" placeholder="Search">
  </label>
</div>



    </ion-content>

Solution 1

Why not just set some attributes to your outer div and your inner label in your .css like

div#container{width: 300px; margin-left: auto; margin-right: auto;}
label#rounded{border-radius: 15px;}

Here's the pen. Is this what you're looking for?

Solution 2

The answer is simple

first you need to put all you need inside ion-item tag and then you need some css properties to shape that ion-item

Example

HTML CODE :

<ion-item class="roundedInput">
  <ion-label position="floating">Rounded Input</ion-label>
  <ion-input></ion-input>
</ion-item>

CSS Code :

.roundedInput {
  --border-color: var(--ion-color-medium-shade);
  --border-radius: 3px;
  --border-width: 1px;
  --box-shadow: 2px gray;
  --highlight-height: 0;
  --background: #f8f9fa;
 }

to take control of the item behavior you need some more CSS Codes

like this :

.roundedInput.ion-invalid.item-has-focus {

  --border-color: var(--ion-color-danger-shade);
}

.roundedInput.ion-valid.item-has-focus {
  --border-color: var(--ion-color-success-shade);
}

.roundedInput.ion-invalid.ion-dirty {
  --border-color: var(--ion-color-danger-shade);
}

.roundedInput.ion-valid.ion-dirty {
  --border-color: var(--ion-color-success-shade);
}

the label with floating position will increase the input height

if its not what you like , all you need to do is just change the position to static or with no position property. or you can just use placeholder

Comments

[Ka Tech]

thanks this is a more appropriate solution if you are using ionic-input in the standard manner...which for me I am, so very helpful