input与textarea padding不显示：仅保存CSS后生效的样式异常问题

我的input和textarea元素的padding设置只有在打开页面后手动保存CSS文件时才会生效，从其他页面跳转至该页面时padding显示为0。已经在两台设备上尝试刷新页面，问题依然存在。

相关代码 #

CSS代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#bg {
  background-color: #264d7c;
}

.title {
  font-weight: 800;
  margin: auto;
  text-align: center;
  font-size: 3rem;
  color: white;
}

.mainform {
  margin-left: 3rem;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: start;
  display: flex;
  gap: 20px;
}

input,
textarea {
  background-color: #264d7c;
  border: solid white;
  color: white;
  padding: 15px;
}

.submit {
  font-weight: 600;
  color: white;
  padding: 10px 30px;
  border-radius: 30px;
  border: solid white;
}

.texts {
  color: white;
  font-weight: 600;
}

.wrappertable {
  margin-top: 2rem;
}

table,
th,
td {
  border: solid black;
  padding: 20px;
  border-collapse: collapse;
  text-align: left;
  font-size: 1.3rem;
  width: 20%;
  margin: auto;
}

th {
  font-weight: 500;
}

.legend {
  font-weight: 700;
}

HTML代码 #

<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Thalation | Cakradhana Nawasena</title>
  <link rel="icon" type="image/x-icon" href="/bahan/simple.png">

  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="thalation.css">
  <script src="./hamburger.js" defer></script>
  <script src="https://web3forms.com/client/script.js" async defer></script>
</head>

<body>

  <!-- Form part -->
  <div class="wrapperform">
    <!-- action="https://api.web3forms.com/submit" method="POST"  -->
    <form class="mainform">
      <span class="texts">Nama (apabila ingin anonim isi '-')</span>
      <input type="hidden" name="access_key" value="3c883bb7-c619-430f-b6c6-eac06e9f62d1">
      <input type="text" placeholder="Your name" name="Name" class="name">
      <span class="texts">Aspirasi</span>
      <textarea class="aspirasi" placeholder="Tuliskan aspirasimu" name="Aspirasi" id="Aspirasi" cols="30" rows="10"></textarea>
      <button class="submit" type="submit">Kirim</button>
    </form>
  </div>
</body>

</html>

问题对比截图 #

• 跳转后异常状态：
• 保存CSS后正常状态：

解决方法 #

1. 强制浏览器加载最新CSS（最可能解决） #

浏览器跳转页面时可能加载了缓存的旧CSS文件，手动保存CSS后服务器会更新文件，浏览器才会重新加载。解决办法是给CSS链接添加版本参数：

<link rel="stylesheet" href="thalation.css?v=1.0">

每次修改CSS后更新版本号（比如v=1.1），或者开发阶段用时间戳确保每次加载最新文件：

<!-- 动态页面示例，比如PHP -->
<link rel="stylesheet" href="thalation.css?timestamp=<?php echo time(); ?>">

静态页面可以手动加随机数，比如?v=20240520。

2. 提高CSS选择器优先级 #

标签选择器（input/textarea）优先级低，可能被其他样式覆盖。改成更具体的选择器：

.mainform input,
.mainform textarea {
  background-color: #264d7c;
  border: solid white;
  color: white;
  padding: 15px;
}

如果还是被覆盖，临时可以用!important（不推荐长期用，优先优化选择器）：

padding: 15px !important;

3. 检查服务器缓存策略 #

生产环境下，检查服务器是否给CSS文件设置了过长的缓存时间。可以配置服务器，让CSS文件基于文件哈希值缓存，文件修改后自动更新缓存。

4. 验证CSS加载状态 #

跳转页面后按F12打开开发者工具，切换到Network标签，筛选CSS类型，查看thalation.css：

• 确认状态码是200（正常加载），不是304（缓存）
• 查看响应内容里是否包含padding:15px的规则

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