如何为select元素设置与其他input字段一致的CSS样式（含标签上移效果）

问题分析 #

原代码中Select元素的标签未实现和Input一致的交互效果，核心问题包括：

• CSS选择器存在语法错误（缺少逗号），导致聚焦/选中状态的样式未生效
• Select默认浏览器样式未重置，视觉上与Input不一致
• Select文本垂直对齐未调整，导致和标签重叠

修改后的完整代码 #

HTML（仅为Select添加required属性） #

<div class="container">
  <div class="text"> Responsive Contact us form</div>
  <form action="#">
    <div class="form-row">
      <div class="input-data">
        <input type="text" required>
        <div class="underline"></div>
        <label> First name</label>
      </div>
      <div class="input-data">
        <input type="text" required>
        <div class="underline"></div>
        <label> last name</label>
      </div>
    </div>
    <div class="form-row">
      <div class="input-data">
        <input type="text" required>
        <div class="underline"></div>
        <label> Email Address</label>
      </div>
      <div class="input-data">
        <input type="text" required>
        <div class="underline"></div>
        <label> Website name</label>
      </div>
    </div>
    <div class="form-row">
      <div class="input-data">
        <select id="gender" name="gender" required>
          <option disabled selected value> -- select an option -- </option>
          <option value="male">Male</option>
          <option value="female">Female</option>
          <option value="others">Others</option>
        </select>
        <div class="underline"></div>
        <label> Gender</label>
      </div>
    </div>
    <div class="form-row">
      <div class="input-data textarea">
        <div class="underline"></div>
        <textarea cols="30" rows="10" required></textarea>
        <label> Message</label>
      </div>
    </div>
    <div class="form-row submit-btn">
      <div class="input-data">
        <div class="inner"></div>
        <input type="submit" Value="submit">
      </div>
    </div>
  </form>
</div>

CSS（关键修改点已标注） #

*{
  margin:0;
  padding:0;
  outline:none;
  box-sizing:border-box;
  font-family: "poppins", sans-serif;
}
body{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:40px;
  background: linear-gradient(115deg, #56d8e4 10%,#9f01ea 90%);
}

.container{
  background:#fff;
  width:800px;
  max-width:800px;
  padding: 25px 40px 10px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
.container .text{
  font-size:35px;
  font-weight:600;
  text-align:center;
  background: -webkit-linear-gradient(right, #56d8e4,#9f01ea );
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.container form{
  padding: 30px 0 0 0;
}
.container .form-row{
  display: flex;
  margin: 32px 0; 
}
form .form-row .input-data{
  width:100%;
  height: 40px;
  margin: 0 20px;
  position:relative;
}
.textarea{
  height:70px;
}
.input-data select{
    background: none;
    text-align: center;
    /* 新增：重置select默认下拉箭头样式 */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* 新增：调整文本垂直对齐，避免和标签重叠 */
    line-height: 40px;
    color: #000;
}
/* 修复：添加缺失的逗号，确保选择器链生效 */
.input-data input:focus ~ label,
.textarea textarea:focus ~ label,
.input-data select:focus ~ label,
.input-data input:valid ~ label,
.textarea textarea:valid ~ label,
.input-data select:valid ~ label{
  transform: translateY(-20px);
  color:#3498db;
  font-size: 14px;
  pointer-events:none;
  transition: all 0.3s ease;
}
.input-data input,
.input-data select,
.textarea textarea{
  display:block;
  height:100%;
  width:100%;
  border:none;
  font-size: 17px;
  border-bottom:2px solid rgba(0,0,0,0.12);
}
.textarea textarea{
  resize:none;
  padding-top:10px;
}
.input-data label{
  position:absolute;
  bottom: 10px;
  font-size:16px;
  pointer-events:none;
  transition: all 0.3s ease;
  /* 新增：确保标签在select上方，避免被文本遮挡 */
  z-index: 1;
  background: #fff;
  padding: 0 5px;
  left: 0;
}
.textarea label{
  width:100%;
  bottom:30px;
  background:#fff;
}
.input-data .underline{
  position:absolute;
  bottom:0;
  height: 2px;
  width:100%;
  background:#3498db;
  /* 新增：初始隐藏下划线，和input保持一致 */
  opacity: 0;
}
.input-data .underline:before,
.input-data .underline:after{
  position:absolute;
  content:"";
  height: 100%;
  width: 100%;
  background: #3498db;
  transform: scaleX(0);
  transform-origin:center;
  transition: all 0.3s ease;
}
/* 修复：拆分选择器，确保下划线显示逻辑正确 */
.input-data input:focus ~ .underline,
.textarea textarea:focus ~ .underline,
.input-data select:focus ~ .underline,
.input-data input:valid ~ .underline,
.textarea textarea:valid ~ .underline,
.input-data select:valid ~ .underline{
  opacity: 1;
}
.input-data input:focus ~ .underline:before,
.input-data input:focus ~ .underline:after,
.textarea textarea:focus ~ .underline:before,
.textarea textarea:focus ~ .underline:after,
.input-data select:focus ~ .underline:before,
.input-data select:focus ~ .underline:after,
.input-data input:valid ~ .underline:before,
.input-data input:valid ~ .underline:after,
.textarea textarea:valid ~ .underline:before,
.textarea textarea:valid ~ .underline:after,
.input-data select:valid ~ .underline:before,
.input-data select:valid ~ .underline:after{
  transform: scaleX(1);
}
.submit-btn .input-data{
  height: 45px !important;
  width:25% !important; /* 修复拼写错误：!mportant -> !important */
  overflow:hidden;
}
.submit-btn .input-data:hover .inner{
  left:0;
}
.submit-btn .input-data .inner{
  height:100%;
  width:300%;
  position:absolute;
  left:-100%;
  background:  -webkit-linear-gradient(right, #56d8e4,#9f01ea );
  transition:all 0.3s ease;
}
.submit-btn .input-data input{
  position:relative;
  z-index: 2;
  background:none;
  border:none;
  color:#fff;
  font-size:17px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor:pointer;
}
@media(max-width:700px){
  .container .text{
    font-size: 30px;
  }
  .container form{
    padding: 10px 0 0 0;
  }
  .container form .form-row{
    display:block;
  }
  form .form-row .input-data{
    margin: 35px 0 !important;
  }
  .submit-btn .input-data{
    width:40% !important;
  }
}

关键修改说明 #

1. 修复CSS选择器语法错误：在.input-data select:focus ~ label后添加逗号，确保:valid状态的样式能正常触发。
2. 重置Select默认样式：通过appearance: none系列属性移除浏览器默认下拉箭头，让Select与Input视觉统一。
3. 调整标签层级与样式：给标签添加z-index:1和白色背景，避免被Select文本遮挡；设置左右内边距，防止标签移动时与下划线重叠。
4. 统一下划线显示逻辑：初始隐藏下划线，仅在聚焦/选中状态下显示，和Input保持一致交互。
5. 优化文本垂直对齐：给Select设置line-height:40px，让内部文本与Input文本垂直位置匹配，避免和底部标签重叠。
6. 添加required属性：确保选择选项后触发:valid状态，让标签保持上移效果。

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