如何实现与指定Input浮动标签样式一致的Select下拉选择器？

Got it! Let's replicate that clean floating label interaction for your <select> dropdown to match your existing input component. Here's a complete, working implementation that aligns with your provided input's style:

Full Code Implementation #

HTML #

<!-- Your existing input component for reference -->
<div class="name">
  <input class="input1" type="name" required>
  <label class="label1">First name</label>
</div>

<!-- New Select component with floating label -->
<div class="select-container">
  <select class="select1" required>
    <!-- Default empty option (disabled to prevent selection) -->
    <option value="" disabled selected>Select an option</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>
  <label class="label-select">Select Option</label>
</div>

CSS #

/* Your existing input styles (unchanged) */
.name {
  position: relative;
}

.label1{
  position: relative;
  color: #555;
  font-size: 15px;
  pointer-events: none;
  right: 15px;
  top: -28px;
  transition: .2s all;
}

.input1:focus ~.label1, .input1:valid ~ .label1{
  top: -49px;
  right: 9px;
  background: #fff;
  padding: 0 5px;
  font-size: 10px;
  color: #1f52f9;
}

.input1{
  outline: none;
  border: 1px solid #9c9c9c;
  border-radius: 5px;
  padding: 0 10px;
  height: 35px;
  font-size: 15px;
}

.input1:focus{
  border: 1.5px solid #1f52f9;
}

.input1[type="name"]{
  display: block;
  margin: 30px 0 0 10px;
}

.input1[type="username"]{
  display: block;
  width: 390px;
  margin: 10px 0 0 10px;
}

.input1[type="submit"]{
  background: #4971f6;
  color: #fff;
  border: none;
  padding:10px 30px;
  border-radius: 5px;
  margin: 40px 0 30px 180px;
  cursor: pointer;
  font-size: 15px;
}

.input1[type="submit"]:hover{
  background: #254fdb;
}

/* New Select component styles */
.select-container {
  position: relative;
  margin: 30px 0 0 10px; /* Match input's margin for consistent layout */
}

.select1 {
  outline: none;
  border: 1px solid #9c9c9c;
  border-radius: 5px;
  padding: 0 30px 0 10px; /* Add right padding for dropdown arrow */
  height: 35px;
  font-size: 15px;
  background-color: #fff;
  appearance: none; /* Optional: Remove browser default arrow to customize */
  cursor: pointer;
}

.select1:focus {
  border: 1.5px solid #1f52f9; /* Match input's focus border style */
}

.label-select {
  position: absolute;
  color: #555;
  font-size: 15px;
  pointer-events: none;
  left: 10px; /* Align with select's left padding */
  top: 8px; /* Vertically center the label in the unactivated select */
  transition: .2s all; /* Reuse the input's smooth transition */
}

/* Trigger floating label on focus AND when a valid option is selected */
.select1:focus ~ .label-select,
.select1:valid ~ .label-select {
  top: -12px;
  left: 5px;
  background: #fff;
  padding: 0 5px;
  font-size: 10px;
  color: #1f52f9; /* Match input's focused label color */
}

/* Optional: Custom dropdown arrow (to replace default browser style) */
.select-container::after {
  content: "▼";
  position: absolute;
  right: 10px;
  top: 8px;
  pointer-events: none;
  color: #555;
  font-size: 12px;
}

Key Details to Match Your Input's Behavior #

1. Matching Structure: We use the same container + control + label structure as your input, so we can leverage the same adjacent sibling selector (~) to link the select's state to the label's position.
2. Valid State Handling: Adding required to the <select> and a disabled empty default option ensures the :valid state activates when a real option is selected—keeping the label floating even after clicking away.
3. Visual Consistency: We reused your input's color scheme, transition timing, font sizes, and border styles to make the select blend seamlessly.
4. Adjusted Label Positioning: Since <select> elements have different default vertical alignment than inputs, we tweaked the initial and floating top values to keep the label perfectly aligned.

内容的提问来源于stack exchange，提问作者Aysar S Alawwad