当按钮处于悬停状态或活动状态时，边框变黑

Question

该按钮通常看起来不错，但是当我单击该按钮时，该按钮周围会出现黑色边框。

我尝试使用border：none，但无法正常工作。

在我的网页的屏幕截图中，您可以清楚地看到该按钮没有边框：但是单击时仍显示边框

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;500&display=swap');
* {
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.quiz-container {
  background-color: #fff;
  width: 600px;
  max-width: 600px;
  border-radius: 10px;
  box-shadow: 0 0 10px 5px rgba(100, 100, 100, 0.2);
  overflow: hidden;
}

.quiz {
  padding: 4rem;
}

ul {
  list-style: none;
  padding: 0;
}

ul li {
  font-size: 1.2rem;
  margin: 1rem 0;
}

button {
  background-color: #457b9d;
  border: none;
  color: white;
  cursor: pointer;
  display: block;
  padding: 2rem;
  width: 100%;
  font-family: inherit;
  font-size: 1.1rem;
}

button:hover {
  background-color: #457b9d;
  border: none;
}

button:active {
  background-color: #1d3557;
  transform: translateY(4px);
  border: none;
}

<h1>Quizteama Aguilera</h1>

<div class="quiz-container">
  <div class="quiz">
    <h2 id="question">Question text</h2>
    <ul>
      <li>
        <input type="radio" id="a" name="answer" />
        <label id="a_text" for="a">answer</label>
      </li>
      <li>
        <input type="radio" id="b" name="answer" />
        <label id="b_text" for="b">answer</label>
      </li>
      <li>
        <input type="radio" id="c" name="answer" />
        <label id="c_text" for="c">answer</label>
      </li>
      <li>
        <input type="radio" id="d" name="answer" />
        <label id="d_text" for="d">answer</label>
      </li>
    </ul>
  </div>

  <button id="submitButton">Submit</button>
</div>