Clever Geek Handbook

How to make a rounded input field in ionic?

I can create an input field with an icon, but I need the input field to be a rounded corner! [enter image description here] [1] and the horizontal center width is smaller than shown in the image. please check the image below.

Please check that my search bar is smaller in width and horizontally centered with a rounded corner. Can we do it 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>
+3


source to share


2 answers


Why not just set some attributes for 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 pen . Is this what you are looking for?

+2


source


The answer is simple

first you need to put whatever you need inside the ion-item tag and then you need some CSS properties to shape that ionic 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 element's behavior, you need some more CSS

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 float label will increase the input height

if that's not what you like, all you have to do is just change the position to static or no position property. or you can just use a placeholder

0


source






More articles:


All Articles