实现Select字段点击时标题上浮效果，与Input字段行为一致

嘿，我来帮你搞定这个select标签上浮的问题！你的input字段是靠:placeholder-shown和:focus伪类触发标签动画的，但select没有placeholder-shown属性，不过我们可以利用它的:focus和:valid状态实现完全一致的效果，还能让代码结构更统一。

修改后的完整代码 #

CSS部分

body { font-family: Avenir Next, Avenir, SegoeUI, sans-serif; } 
form { margin: 2em 0; } 

.field { 
  display: flex; 
  flex-flow: column-reverse; 
  margin-bottom: 1em; 
  width: 195px; /* 统一控制字段宽度，替代原来select的单独设置 */
} 

label, input, select { /* 把select加入过渡效果，保持动画一致 */
  transition: all 0.2s; 
  touch-action: manipulation; 
} 

input, select { /* 统一input和select的基础样式，视觉上完全对齐 */
  font-size: 1.5em; 
  border: 0; 
  border-bottom: 1px solid #ccc; 
  font-family: inherit; 
  -webkit-appearance: none; 
  border-radius: 0; 
  padding: 0; 
  cursor: pointer; /* select用pointer光标更符合交互逻辑 */
  background: transparent; 
} 

input:focus, select:focus { /* 统一聚焦时的边框样式 */
  outline: 0; 
  border-bottom: 1px solid #666; 
} 

label { 
  text-transform: uppercase; 
  letter-spacing: 0.05em; 
} 

/* Input的原有动画逻辑保持不变 */
input:placeholder-shown + label { 
  cursor: text; 
  max-width: 66.66%; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  transform-origin: left bottom; 
  transform: translate(0, 2.125rem) scale(1.5); 
} 

::-webkit-input-placeholder { 
  opacity: 0; 
  transition: inherit; 
} 

input:focus::-webkit-input-placeholder { 
  opacity: 1; 
} 

input:not(:placeholder-shown) + label, input:focus + label { 
  transform: translate(0, 0) scale(1); 
  cursor: pointer; 
} 

/* 新增Select的标签动画逻辑 */
select:not(:valid) + label { /* 未选择有效选项时，标签下沉 */
  cursor: pointer;
  max-width: 66.66%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform-origin: left bottom;
  transform: translate(0, 2.125rem) scale(1.5);
}

select:valid + label, select:focus + label { /* 聚焦或选中有效选项时，标签上浮 */
  transform: translate(0, 0) scale(1);
  cursor: pointer;
}

/* 可选：自定义下拉箭头，消除浏览器默认样式差异 */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 9L1 4h10z' fill='%23ccc'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 top 50%;
  padding-right: 1.2em; /* 给箭头留出空间，避免文字被遮挡 */
}

HTML部分

<form action="">
  <div class="field">
    <input type="text" name="fullname" id="fullname" placeholder="Jane Appleseed">
    <label for="fullname">Name</label>
  </div>
  <div class="field">
    <input type="email" name="email" id="email" placeholder="jane.appleseed@example.com">
    <label for="email">Email</label>
  </div>
  <!-- 把select放到和input一样的.field容器里，结构统一 -->
  <div class="field">
    <select name="letters" id="letters" class="selectField" required>
      <option value="" selected disabled hidden>Your Letter</option>
      <option value="A">Letter A</option>
      <option value="B">Letter B</option>
      <option value="C">Letter C</option>
    </select>
    <label for="letters">Letters</label>
  </div>
</form>

关键修改说明 #

1. 结构统一：把select的容器改成和input一样的.field，复用flex反转布局，让标签和控件的位置关系完全一致，代码更整洁。
2. 样式对齐：给select添加和input相同的字体、边框、过渡样式，确保视觉上没有差异。
3. 动画触发逻辑：
   • 因为你给select设置了required属性，当用户选中非默认的有效选项时，select会进入:valid状态；
   • 用select:not(:valid) + label模拟input的:placeholder-shown效果，未选择时标签下沉；
   • 用select:valid + label和select:focus + label触发标签上浮，和input的交互逻辑完全匹配。
4. 自定义下拉箭头：可选的SVG箭头可以消除不同浏览器默认下拉箭头的样式差异，让整体风格更统一。

这样修改后，select组件就会和input完全一样：点击时标签上浮，选择选项后保持上浮状态，未选择时标签下沉显示“Your Letter”的占位效果。

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