VS Code资源管理器重命名时修改背景色及解决选中无高亮问题

I totally get how frustrating this is—trying to rename files in the Explorer without any selection highlight or visible cursor feels like fumbling in the dark. Those editor-focused color customizations you tried don’t work here because the rename input box is part of the workbench UI, not the text editor. Let’s fix this step by step:

1. Lock the Rename Box to Inspect Elements (For Debugging) #

First, if you want to verify the CSS classes yourself (since the rename box closes on blur), use this trick:

• Open the rename box in the Explorer (hit F2 on the target file/folder)
• Open the command panel with Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac)
• Run Toggle Developer Tools to open the dev console
• Paste this into the console and hit enter:

  setTimeout(() => { document.activeElement.blur(); }, 5000)
  

• Immediately click back into the rename box to keep it focused. After 5 seconds, it’ll lose focus but stay open, letting you inspect the input element and its classes in the dev tools.

2. Working Color Customizations (No Plugins Needed) #

VS Code has dedicated color properties for input boxes (which the rename box uses) that aren’t listed in the editor colors docs. Add these to your settings.json:

"workbench.colorCustomizations": {
  // Background color for selected text in the rename box
  "inputBox.selectedBackground": "#ab3beb3f",
  // Color of the rename box cursor
  "inputBox.cursor": "#fc199a",
  // Optional: Text color in the rename box
  "inputBox.foreground": "#ffffff",
  // Optional: Background of the rename box itself
  "inputBox.background": "#1e1e1e"
}

Save the settings, restart VS Code, and the rename box should now show clear selection highlight and a visible cursor.

3. Fallback: Custom CSS (If Default Settings Don’t Work) #

If the above settings don’t take effect (some themes might override them), use the Custom CSS and JS Loader extension to inject custom styles:

1. Install the extension from the VS Code marketplace
2. Create a .css file somewhere on your machine (e.g., vscode-custom-styles.css)
3. Add these styles to the file:

/* Force highlight for selected text in Explorer rename box */
.monaco-inputbox.idle.selected-text {
  background-color: #ab3beb3f !important;
}

/* Force visible cursor in rename box */
.monaco-inputbox.cursor {
  border-left-color: #fc199a !important;
}

4. Update your settings.json to point to this file:

"vscode_custom_css.imports": [
  "file:///path/to/your/vscode-custom-styles.css"
]

5. Run the Reload Custom CSS and JS command from the command panel to apply changes.

Note: Custom CSS might break after VS Code updates—you’ll need to re-enable it via the extension’s prompts if that happens.

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