Textfield 连接与标签设置求助：实现左侧标签右侧可输入的连接式文本框

Hey there! I’ve wrestled with this exact UI pattern before, so I totally get how annoying it is when you can’t get those TextFields to look connected just right. Let’s walk through a straightforward way to build this using HTML and CSS—no fancy frameworks required (though we can adapt it if you’re using React/Vue/etc.).

Step 1: Set Up the HTML Structure #

First, we’ll create a container to hold our label and the connected input group. Each input will sit side-by-side in a flex row:

<div class="connected-input-group">
  <label class="input-label" for="input-group">Your Label</label>
  <div class="input-row">
    <input id="input-group-1" type="text" class="connected-input" placeholder="Input 1">
    <input id="input-group-2" type="text" class="connected-input" placeholder="Input 2">
    <input id="input-group-3" type="text" class="connected-input" placeholder="Input 3">
  </div>
</div>

Note: We added id attributes to inputs and a for attribute to the label for accessibility—screen readers will thank you!

Step 2: Style for Connected Appearance #

The magic happens in CSS. We’ll remove overlapping borders between inputs, adjust border radii, and align everything neatly:

/* Main container to align label and inputs */
.connected-input-group {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.25rem;
}

/* Style the left label */
.input-label {
  font-weight: 500;
  font-size: 1rem;
  min-width: 100px; /* Adjust based on your label's length */
}

/* Flex row to stack inputs horizontally */
.input-row {
  display: flex;
}

/* Base style for all connected inputs */
.connected-input {
  padding: 0.8rem 1.2rem;
  border: 1px solid #d1d5db;
  font-size: 1rem;
  transition: border-color 0.2s ease;
}

/* Remove right border and rounded corners for all except last input */
.connected-input:not(:last-child) {
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Remove left rounded corners for all except first input */
.connected-input:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Focus state for accessibility and visual feedback */
.connected-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* Fix focus border overlap for middle inputs */
.connected-input:focus:not(:first-child) {
  border-left-color: #3b82f6;
}

Step 3: Tweaks for Your Use Case #

• Adjust Input Widths: If you want fixed-width inputs, add width: 120px to .connected-input. For flexible widths, use flex-grow: 1 to let them fill available space.
• Mobile Responsiveness: On small screens, switch the main container to vertical flex:

  @media (max-width: 640px) {
    .connected-input-group {
      flex-direction: column;
      align-items: flex-start;
    }
  }
  

• Framework Adaptation: If you’re using React, wrap this in a component and manage input states with useState. For Vue, use v-model to bind values.

This setup will give you exactly the connected TextField look you want—with a clear left label, editable inputs on the right, and a polished, cohesive appearance.

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