Angularjs 如何在ionic中创建圆形输入字段？

我能够使图标输入字段，但我需要的输入字段应该是圆角！[在此处输入图像描述][1]，水平中心宽度较小，如图所示。 请检查下图

请检查我的搜索栏是否宽度较小，且水平居中且有圆角。我们可以在爱奥尼亚制作这个吗

这是我的密码

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

---

为什么不像.css那样为外部div和内部标签设置一些属性呢

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

这是我的建议。这就是你要找的吗？

答案很简单

首先，您需要将所有需要的内容放入ion项标记中，然后需要一些css属性来塑造该ion项

例子 HTML代码：

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

要控制项目行为，您需要更多的CSS代码

像这样：

.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);
}

带有浮动位置的标签将增加输入高度

如果它不是您喜欢的，您所需要做的就是将位置更改为static或不带position属性。

---

或者您可以使用占位符

谢谢，如果您以标准方式使用离子输入，这是一个更合适的解决方案……这对我来说非常有用

.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);
}