仅用CSS/HTML实现input[type=file]点击后的永久视觉变化

Got it, let's solve this. You're using a transparent input[type=file] layered over an image for a custom upload button—great call for maximum browser compatibility—but you're stuck with users who access your app via JS-stripping proxies, meaning your JS-based filename display and state updates don't work.

We can fix this entirely with pure CSS/HTML, using native form element states and selectors to trigger a permanent visual change once a file is selected. No scripts required.

Core Idea #

File inputs have native states we can target with CSS: when a file is selected, the input becomes :valid (if marked required), or we can use a hidden checkbox to "remember" the selection state. We'll use these states to modify the underlying image's styling permanently until the page is refreshed.

Approach 1: Hidden Checkbox + Adjacent Sibling Selectors (Better Compatibility) #

This method uses a hidden checkbox to track the "file selected" state. When the user picks a file, a tiny inline event handler (which works even in JS-stripped environments) checks the box, and we use CSS to style the image based on that checkbox's :checked state.

<div class="upload-wrapper">
  <!-- Hidden checkbox to track selection state -->
  <input type="checkbox" id="file-selected" class="sr-only">
  
  <!-- Transparent file input covering the image -->
  <input 
    type="file" 
    id="upload-btn" 
    class="transparent-file-input"
    onchange="document.getElementById('file-selected').checked = true"
  >
  
  <!-- Your custom upload image -->
  <img src="upload-icon.png" alt="Upload file" class="upload-image">
  
  <!-- Optional: Pure CSS filename display -->
  <label for="upload-btn" class="filename-label"></label>
</div>

/* Base wrapper: relative positioning for layered elements */
.upload-wrapper {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* Hide the checkbox visually but keep it accessible */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Transparent file input: covers the entire image */
.transparent-file-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2; /* Ensure it's clickable over the image */
}

/* Default image styling */
.upload-image {
  width: 120px;
  height: 120px;
  object-fit: contain;
  transition: all 0.3s ease;
}

/* Permanent visual change when checkbox is checked (file selected) */
#file-selected:checked ~ .upload-image {
  opacity: 0.6;
  border: 2px solid #27ae60;
  border-radius: 8px;
  filter: grayscale(30%);
}

/* Optional: Pure CSS filename display (works in most modern browsers) */
.filename-label {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: #333;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Show filename using the input's native value */
.transparent-file-input:not(:placeholder-shown) + .upload-image + .filename-label::after {
  content: "Selected: " attr(value);
}

Approach 2: :has() Pseudo-Class (Cleaner, Modern Browsers) #

If you're targeting modern browsers (Chrome, Firefox 121+, Safari 15.4+), you can skip the hidden checkbox entirely and use the :has() pseudo-class to detect when the file input is :valid (which happens when a file is selected if the input has the required attribute).

<div class="upload-wrapper">
  <input type="file" id="upload-btn" class="transparent-file-input" required>
  <img src="upload-icon.png" alt="Upload file" class="upload-image">
</div>

.upload-wrapper {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.transparent-file-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.upload-image {
  width: 120px;
  height: 120px;
  object-fit: contain;
  transition: all 0.3s ease;
}

/* Trigger style change when input is valid (file selected) */
.upload-wrapper:has(.transparent-file-input:valid) .upload-image {
  opacity: 0.6;
  border: 2px solid #3498db;
  border-radius: 8px;
  filter: sepia(20%);
}

Key Notes #

• Compatibility: Approach 1 works with almost all browsers (even older ones that support adjacent sibling selectors). Approach 2 uses :has(), which is widely supported in modern browsers but not in legacy versions like IE.
• Permanent State: Both methods rely on native form element states (:checked or :valid) which persist until the page is refreshed—no JS needed to maintain the visual change.
• Filename Display: The optional CSS filename trick uses the input's native value attribute, which only shows the filename (not the full path, for security reasons) and works in most modern browsers without JS.

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