如何在离子中制作圆形输入字段？

Question

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

请检查我的搜索栏宽度较小且水平居中且具有圆角。我们可以用 ionic 制作它吗

这是我的代码

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

Answer 1

答案很简单

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

例子

HTML 代码：

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

CSS代码：

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

要控制项目行为，您需要更多 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);
}

浮动位置的标签会增加输入高度

如果它不是你喜欢的，你需要做的就是将位置更改为静态或没有位置属性。或者你可以只使用占位符