基于Bootstrap 4的标签前置输入框浮动标签CSS实现求助

The core issue here is that CSS doesn't support previous sibling selectors (there's no equivalent to ~ or + for targeting elements that come before another in the DOM). Since your label sits before the input (wrapped in a span), we can't directly style the label using the input's :not(:placeholder-shown) state with pure CSS alone. Here are two reliable approaches to fix this:

Option 1: Pure CSS with :has() (Modern Browsers) #

If you only need to support modern browsers (Chrome 105+, Firefox 121+, Safari 15.4+), the :has() pseudo-class lets you detect if the input inside the parent container has a value, allowing you to style the label without JavaScript.

First, set up base styles for the floating label system:

:root {
  --input-padding-y: .75rem;
  --input-padding-x: 1rem;
}

/* Make parent container relative for absolute label positioning */
.form-row {
  position: relative;
  margin-bottom: 1.5rem;
}

/* Style label to sit on top of the input initially */
.form-row label {
  position: absolute;
  top: var(--input-padding-y);
  left: var(--input-padding-x);
  margin: 0;
  transition: all 0.2s ease-in-out;
  pointer-events: none; /* Prevent label from blocking input clicks */
  color: #6c757d; /* Match Bootstrap's default muted text color */
}

/* Add padding to input to make space for the floating label */
.form-row .form-control {
  padding: var(--input-padding-y) var(--input-padding-x);
}

Then add styles to float the label when the input is focused or has content:

/* Float label when input is focused OR has a non-empty value */
.form-row:focus-within label,
.form-row:has(.form-control:not(:placeholder-shown)) label {
  top: calc(var(--input-padding-y) / 2);
  padding: 0 .25rem;
  font-size: 12px;
  color: blue;
  background-color: #fff; /* Cover input border for clean appearance */
  transform: translateY(-100%);
}

Option 2: CSS + JavaScript (Full Browser Compatibility) #

For broader browser support (including older versions), use JavaScript to toggle a class on the parent container when the input has a value. Use that class to style the floating label.

Step 1: Base CSS #

Start with the same base styles as above, plus a class for the floating state:

:root {
  --input-padding-y: .75rem;
  --input-padding-x: 1rem;
}

.form-row {
  position: relative;
  margin-bottom: 1.5rem;
}

.form-row label {
  position: absolute;
  top: var(--input-padding-y);
  left: var(--input-padding-x);
  margin: 0;
  transition: all 0.2s ease-in-out;
  pointer-events: none;
  color: #6c757d;
}

.form-row .form-control {
  padding: var(--input-padding-y) var(--input-padding-x);
}

/* Floating label style (triggered by parent class) */
.form-row.has-value label,
.form-row:focus-within label {
  top: calc(var(--input-padding-y) / 2);
  padding: 0 .25rem;
  font-size: 12px;
  color: blue;
  background-color: #fff;
  transform: translateY(-100%);
}

Step 2: JavaScript to Toggle the Class #

Add this script to detect input values and update the parent container's class:

// Target all relevant input fields
const floatingInputs = document.querySelectorAll('.form-row .form-control');

// Initialize state for pre-filled inputs
floatingInputs.forEach(input => {
  updateLabelState(input);
});

// Listen for input and change events to update state
floatingInputs.forEach(input => {
  input.addEventListener('input', () => updateLabelState(input));
  input.addEventListener('change', () => updateLabelState(input));
});

// Helper function to toggle the "has-value" class
function updateLabelState(input) {
  const parentRow = input.closest('.form-row');
  if (input.value.trim() !== '') {
    parentRow.classList.add('has-value');
  } else {
    parentRow.classList.remove('has-value');
  }
}

Key Notes: #

• pointer-events: none on the label ensures users can click directly on the input without the label blocking interactions.
• background-color: #fff on the floating label prevents it from overlapping with the input's border for a polished look.
• Adjust top, transform, and padding values to match your Bootstrap theme's spacing.

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