Ionic5不使用ion-item实现ion-input末尾显示图标CSS方案咨询

解决方案 #

无需修改现有HTML结构，也不需要引入ion-item组件，直接调整CSS定位即可实现需求，修改后的样式代码如下：

.primary-input {
    background: aliceblue;
    color: #999999;
    border-radius: 5px;
    margin-bottom: 10px;
    /* 新增：开启相对定位，作为内部图标的定位父级 */
    position: relative;
}

/* 密码可见性切换图标样式 */
.primary-input ion-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
    /* 可根据需求自行调整图标颜色、大小 */
    color: #666;
    font-size: 20px;
}

/* 调整原生输入框右内边距，避免输入内容和图标重叠 */
.primary-input .native-input {
    padding-right: 45px !important;
}

如果后续你调整了输入框高度、图标尺寸，只需要对应修改right和padding-right的数值即可适配，不需要其他额外改动。

内容的提问来源于stack exchange，提问作者Glen