如何用CSS实现电话输入框与性别选择框样式匹配其他表单字段？

问题说明 #

制作响应式表单时，性别选择框与电话输入框的样式无法和其他表单字段保持一致，包括标签上移效果、底部下划线动画以及整体布局对齐。

问题分析 #

1. 电话字段结构问题：电话区域的<select>和<input>嵌套在.row中，但.row未设置相对定位，导致标签和下划线的定位逻辑失效，同时内部元素的样式未与其他字段统一。
2. CSS选择器语法错误：标签上移和下划线动画的选择器中，部分条目缺少逗号分隔，导致选择器不生效。
3. 性别选择框样式缺失：<select>元素的默认样式未完全重置，且未正确绑定动画触发条件。

修改后的完整代码 #

HTML代码 #

<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 phone-group">
        <div class="row">
          <select required>
            <option value="">+91</option>
            <option value="">+92</option>
          </select>
          <input type="text" required>
        </div>
        <div class="underline"></div>
        <label> Phone No.</label>
      </div>
    </div>
    <div class="form-row">
      <div class="input-data">
        <input type="text" required>
        <div class="underline"></div>
        <label> Website name</label>
      </div>
      <div class="input-data">
        <select required>
          <option value="">Male</option>
          <option value="">Female</option>
          <option value="">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; 
}
.input-data .row{
  display:flex;
  gap:0.5rem;
  width:100%;
  height:100%;
  align-items:center;
}
.input-data .row select,
.input-data .row input{
  height:100%;
  border-bottom:2px solid rgba(0,0,0,0.12);
  font-size:17px;
}
.input-data .row select{
  width: 80px;
  background: none;
  text-align: center;
  border:none;
}
.input-data .row input{
  flex:1;
  border:none;
}
form .form-row .input-data{
  width:100%;
  height: 40px;
  margin: 0 20px;
  position:relative;
}
.textarea{
  height:70px;
}
.input-data select{
    background: none;
    text-align: left;
    width:100%;
    height:100%;
    border:none;
    font-size:17px;
    border-bottom:2px solid rgba(0,0,0,0.12);
}
.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,
.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;
}
.phone-group label{
  bottom:10px;
}
.textarea label{
  width:100%;
  bottom:30px;
  background:#fff;
}
.input-data .underline{
  position:absolute;
  bottom:0;
  height: 2px;
  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{
  transform: scaleX(1);
}
.submit-btn .input-data{
  height: 45px !important;
  width:25% !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;
  }
}

核心修改点 #

• 修复CSS选择器错误：在标签上移和下划线动画的选择器中补充分隔逗号，确保所有表单元素的状态变化都能触发动画。
• 重构电话字段结构：将.underline移到.row外部，确保下划线宽度与父容器一致；给.row设置宽高和对齐方式，让内部的select和input高度与其他字段统一。
• 统一select样式：重置性别和电话区域select的默认样式，设置宽高、边框和背景，使其与input视觉一致。
• 简化下划线动画逻辑：直接通过:focus和:valid状态控制下划线的scaleX变换，移除冗余的伪元素。
• 添加required属性：给电话区域的select和input添加required，确保标签上移的:valid状态能正确触发。

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