Ionic 4输入框聚焦边缘无法移除问题求助

Hey there! I totally get it—upgrading Ionic versions can break old styling tricks, and those persistent input focus highlights are no exception. Let’s get this sorted for you.

Why Your Old v3 Variables Aren’t Working #

Ionic v4 completely revamped its component styling system, including renaming many Sass variables and adopting Shadow DOM for components. The text-input-md-* variables you used in v3 were replaced with new, platform-specific variables, and Shadow DOM means regular CSS can’t easily target internal component elements without using special selectors.

Solution 1: Use Updated Sass Variables (Recommended for Sass Projects) #

If your project uses Sass, update your variables.scss (note: it’s .scss now, not .css in v4) with these platform-specific variables to disable all input highlights:

// Disable focus highlights for Material Design (Android)
$input-md-focus-highlight-color: transparent;
$input-md-highlight-color-invalid: transparent;
$input-md-highlight-color-valid: transparent;

// Disable focus highlights for iOS
$input-ios-focus-highlight-color: transparent;
$input-ios-highlight-color-invalid: transparent;
$input-ios-highlight-color-valid: transparent;

Make sure your variables.scss is imported globally in your project (it usually is by default in Ionic v4 starters) so these variables apply across all components.

Solution 2: Direct CSS Override with Shadow Parts #

If you’re using plain CSS or the Sass variables don’t work for some reason, use Ionic’s Shadow Parts to target the internal highlight element directly. Add this to your global CSS file (like src/global.scss):

// Remove default, focus, valid, and invalid highlights
ion-input::part(highlight) {
  background: transparent !important;
  border-color: transparent !important;
}

// Ensure focus state doesn't bring back the highlight
ion-input:focus::part(highlight) {
  background: transparent !important;
  border-color: transparent !important;
}

// Handle valid/invalid states too
ion-input.valid::part(highlight),
ion-input.invalid::part(highlight) {
  background: transparent !important;
}

The ::part(highlight) selector targets the internal element in ion-input’s Shadow DOM that renders the bottom highlight line—this is the official way to style Shadow DOM components in Ionic v4+.

Quick Check #

Double-check that your styles are applied globally (not just in a component’s local CSS file) because local component styles can’t penetrate Shadow DOM without using ::part.

内容的提问来源于stack exchange，提问作者Ivan More Flores