CSS边框颜色调整与输入框标签位置问题求助

我在调整表单样式时遇到两个问题：

• 输入框聚焦时边框无法完全变成红色，部分区域颜色和代码设置不符
• 想把CVC标签像其他标签一样放在对应输入框的上方起始位置，但flex布局用错了导致布局混乱

问题截图：

我的代码： #

HTML代码

<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=Space+Grotesk&amp;display=swap" rel="stylesheet">

<main>
  <section class="background-image">
    <aside>
      <img id="background-img" src="https://picsum.photos/seed/picsum/200/300" alt="background-for-desktop">
    </aside>
  </section>
  <section class="form-wrapper">
    <div class="form-div">
      <form action="" method="post">
        <label for="name">CARDHOLDER NAME</label>
        <input type="text" name="name" id="name" required>
        <label for="card-number">CARD NUMBER</label>
        <input type="number" name="card-number" id="card-number" required>
        <label for="month">DATE</label>
        <div class="date-and-cvc">
          <div class="date">
            <input type="number" name="month" id="month" required>
            <input type="number" name="year" id="year">
          </div>
          <div class="cvc">
            <label for="cvc">cvc</label>
            <input type="number" name="cvc" id="cvc" maxlength="3" minlength="3" required>
          </div>
        </div>
        <button type="submit">Confirm</button>
      </form>
    </div>
  </section>
</main>

CSS代码

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

html {
  overflow: hidden;
}

body {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 18px;
  height: 100vh;
}

main {
  display: flex;
}

.background-image {
  display: flex;
  height: 100vh;
}

#background-img {
  height: 100%;
  flex-wrap: wrap;
}

.form-wrapper {
  width: 100%;
}

.form-div {
  width: 30%;
  margin: auto;
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}

input {
  margin-bottom: 1rem;
  border-radius: .2rem;
  padding: .5rem;
  outline: none;
}

input:focus {
  border-color: red;
}

form>input {
  width: 100%
}

.date-and-cvc {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.date {
  display: flex;
  width: 50%;
}

.date>input {
  width: 100%;
}

form>label {
  align-self: flex-start;
}

.cvc {
  display: flex;
}

.cvc>label {
  align-self: flex-start;
}

button {
  color: white;
  background-color: hsl(278, 68%, 11%);
  padding: .7rem;
  width: 100%;
  border-radius: .5rem;
  cursor: pointer;
}

解决方案： #

问题1：输入框聚焦边框不全红

浏览器默认会给输入框设置border-style和border-width的默认值，仅修改border-color无法完全覆盖样式。调整输入框的初始和聚焦样式：

input {
  margin-bottom: 1rem;
  border-radius: .2rem;
  padding: .5rem;
  outline: none;
  /* 统一初始边框样式，避免浏览器默认值干扰 */
  border: 1px solid #ccc;
}

input:focus {
  /* 直接设置完整边框，确保全红 */
  border: 1px solid red;
}

问题2：CVC标签位置调整

当前.cvc使用横向flex布局，导致标签和输入框并排，需要改成纵向布局，同时调整结构让DATE标签也符合统一布局：

1. 修改CSS：

.date {
  display: flex;
  flex-direction: column;
  width: 50%;
}
/* 给月份/年份输入框加横向容器 */
.date-inputs {
  display: flex;
  gap: 0.5rem;
}
.cvc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 45%;
}
.cvc>input {
  width: 100%;
}

2. 调整HTML结构，把DATE标签移到对应容器内：

<div class="date-and-cvc">
  <div class="date">
    <label for="month">DATE</label>
    <div class="date-inputs">
      <input type="number" name="month" id="month" required>
      <input type="number" name="year" id="year">
    </div>
  </div>
  <div class="cvc">
    <label for="cvc">CVC</label>
    <input type="number" name="cvc" id="cvc" maxlength="3" minlength="3" required>
  </div>
</div>

这样就能让所有标签都位于对应输入框上方，布局整齐统一。

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