Django中HTML+CSS样式异常：文件上传表单美化求助

首先，你犯了个基础错误：同一个页面里不能给两个元素用相同的ID，HTML规范里ID是唯一标识，浏览器只会识别第一个带upload_container的表单，第二个的ID等于白加，这是样式失效的关键原因之一。

要保留默认的「Browse...」按钮同时美化表单，不用折腾重复ID，直接用类来统一控制，再给文件输入框加个包裹层调整布局就行。下面是修正后的代码：

修正后的HTML #

<div class="page_thirdblock thirdblock">
  <div class="thirdblock__container _container">
    <form method="POST" enctype="multipart/form-data" class="upload-form"> 
      {% csrf_token %}
      <div class="file-input-wrapper">
        <input type="file" name="upload_file" class="custom-file-input">
      </div>
      <input type="hidden" name="form_type" value="form_1">
      <button type="submit" class="upload-btn">Upload File 1</button>
    </form>
    <form method="POST" enctype="multipart/form-data" class="upload-form">
      {% csrf_token %}
      <div class="file-input-wrapper">
        <input type="file" name="upload_file" class="custom-file-input">
      </div>
      <input type="hidden" name="form_type" value="form_2">
      <button type="submit" class="upload-btn">Upload File 2</button>
    </form>
  </div>
</div>

对应的CSS样式（保留原生Browse按钮） #

/* 统一表单布局 */
.upload-form {
  margin: 1rem 0;
  display: flex;
  gap: 0.8rem;
  align-items: center;
}

/* 文件输入框包裹层，调整间距和对齐 */
.file-input-wrapper {
  padding: 0.4rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f8f9fa;
}

/* 自定义文件输入框样式，不隐藏Browse按钮 */
.custom-file-input {
  font-size: 0.9rem;
  padding: 0.2rem 0;
  color: #333;
}

/* 美化提交按钮 */
.upload-btn {
  padding: 0.5rem 1.2rem;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  transition: background-color 0.2s;
}

.upload-btn:hover {
  background-color: #0056b3;
}

这样做的好处：

• 用统一的类upload-form控制两个表单，彻底避免ID重复问题
• 给文件输入框加包裹层，既能美化容器，又完全保留原生的「Browse...」按钮
• 提交按钮做了基础的hover效果，提升交互感

如果需要更精细的样式，比如调整文件输入框的文本区域样式，只需要修改.custom-file-input的属性，注意不要用display: none隐藏原生控件，不然会丢失默认的Browse按钮。

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