将 cursor 更改为离子输入上的指针

Question

有没有办法申请cursor: pointer; ion-input元件？ 似乎无论我做什么，它都显示默认的 i-beam cursor。

我的输入：

<ion-input [readonly]="true" [placeholder]="getPlaceholder() | translate"></ion-input>

CSS 我试过了：

ion-input {
  input {
    cursor: pointer;
  }
}

ion-input {
  cursor: pointer;
}

ion-input::part(input) {
  cursor: pointer;
}

我已经在所有这些上尝试了!important标签。

Answer 1

这是一个显示解决方案的工作堆栈闪电战。

为了解决这类问题：

1. 右键单击离子输入元件。
2. 观察你的元素在 shadow dom 上。
3. 进一步观察，您真正感兴趣的是具有原生输入 class 的原生输入。
4. 添加以下 CSS 以正确穿透 shadowDom。

::ng-deep ion-input .native-input {
  cursor: pointer;
}

使用::ng-deep 会穿透 dom，rest 会负责样式应用的正确选择。