CSS通过div和类选择器无法统一设置输入框样式的问题求助

嘿，我看了你遇到的问题——想用类选择器和div来统一设置input和select元素的边距、内边距，但死活不生效，反而用form input这种选择器就可以，对吧？我帮你瞅了瞅你的代码，发现了几个小问题，咱们一步步来解决~

问题核心排查 #

先帮你捋清楚为啥现在的代码不生效：

• 你把inputfield类加在了包裹input的div上，但CSS里这个类写的是块级元素的样式（比如margin-left、padding），这些样式都作用在div上，input根本没拿到，自然不会生效
• HTML里有的div用了.Row（大写R），有的用了.row（小写r），但CSS只定义了.Row的样式，小写的.row是无样式状态，这也会导致布局混乱
• 你注释掉的input[type=number]是直接给input元素设置样式，所以能生效；但现在把样式写到.inputfield却绑定在父div上，这就是两种选择器效果不同的关键！

解决方案：调整代码让类选择器正确生效 #

咱们从CSS和HTML两部分调整，让input和select的样式统一起来：

1. 修正CSS代码

把样式正确绑定到input元素，同时统一select的边距内边距：

.heading {
  font-family: "Times New Roman", Times, serif;
  text-align:center;
  font-weight: bold;
  color: black;
  font-size: 180%;
  padding: 20px 20px 15px 20px;
  background-color: #76ff03;
}

label {
  font-size: 30px;
}

/* 统一select的边距和内边距，和input对齐 */
select {
  height: 45px;
  width: 340px;
  font-size: 20px;
  font-family: Arial;
  border-radius: 15px;
  margin-left: 20px;
  padding: 0 10px;
}

/* 把.inputfield改成给input用的类，直接作用在输入框上 */
.inputfield {
  height: 40px;
  width: 150px;
  border: none;
  background: transparent;
  border-bottom: 1px solid black;
  outline: none;
  margin-left: 20px;
  padding: 10px 0;
  font-family: "Times New Roman", Times, serif;
  font-size: 20px;
}

/* 统一类名大小写，避免样式失效 */
.row {
  margin-left: 200px;
  padding: 30px;
  /* 可选：用flex布局让子元素自动对齐，不用手动调margin */
  display: flex;
  gap: 20px;
  align-items: center;
}

::placeholder {
  color: Black;
}

2. 修正HTML结构

把inputfield类直接加到input元素上，而不是父div：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <base target="_top">
  </head>
  <body>
    <iframe name="dummyframe" id="dummyframe" style="display: none;"></iframe>
    <form action="submitscript.php" target="dummyframe">

      <div class="heading">
        <label>Sample Monitoring Sheet</label>
      </div>
  
      <div class="row">
        <select id="Category">
          <option>Hardware</option> 
          <option>Software</option>
          <option>Accessories</option>   
        </select>
        <select id="subcategory">
          <option>Processor</option> 
          <option>RAM</option>
          <option>ROM</option>   
        </select>
        <select id="shift">
          <option>Hard disk</option> 
          <option>Key board</option>
          <option>Mouse</option>
        </select>
      </div>

      <div class="row">
        <input id="plan" type="number" class="inputfield validate" placeholder="MPlan">
      </div>
         
      <div class="row">
        <input id="per" type="number" class="inputfield validate" placeholder="Permanent">
        <input id="tra" type="number" class="inputfield validate" placeholder="Trainee">
        <input id="adi" type="number" class="inputfield validate" placeholder="Adiraj">
      </div>
     
      <div class="row">
        <input id="cad" type="number" class="inputfield validate" placeholder="Cadmaxx">  
        <input id="lay" type="number" class="inputfield validate" placeholder="Layam">
        <input id="mau" type="number" class="inputfield validate" placeholder="Mauli">
      </div>
    
      <div class="row">
        <input type="submit" id="btn" value="Submit">
      </div>
    
    </form>  
  </body>
</html>

这样调整后，input和select的样式就能统一生效啦，你还可以根据需求微调margin、padding的值来达到更完美的对齐效果~

备注：内容来源于stack exchange，提问作者Sunil Panda