示例

Question

我可以用图标创建输入字段，但是我需要输入字段应该是圆角！[在此处输入图像描述] [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>

Answer 1

为什么不在.css中设置一些属性到外部div和内部标签

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

这里是pen。这是你正在寻找的吗？

Answer 2

答案很简单

首先，您需要将所需的所有内容放入离子项目标签中，然后需要一些css属性来对离子项目进行整形

示例

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

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

如果它不是您想要的，只需将位置更改为static或不使用position属性。或者您可以只使用占位符

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

2 个答案:

示例