Search code examples
angularjsangularjs-directiveangularjs-scopeionic-framework

how to make rounded input field in ionic?


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

  • 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?