html - 单击后保持按钮样式

Question

我有一个提交按钮。初始背景颜色为 X。当我将鼠标悬停在按钮上时，背景颜色变为 Y。一切正常。但是当我点击按钮时，背景颜色变回 X。我希望它保持 Y 的颜色。我该怎么做？

#submitStarted {
  border: solid 0px;
  border-radius: 30px;
  color: white;
  background-color: #D94C27;
  font-family: "Open Sans", Arial;
  padding: 14px 30px;
  font-weight: 450;
  font-size: 15px;
}

#submitStarted:hover {
  cursor: pointer;
  background-color: #C92A00;
}

<input id="submitStarted" type="submit" value="Get Started">

Answer 1

这叫做焦点状态，你还需要添加 #submitStarted:focus 和 #submitStarted:hover 以保持与悬停相同的颜色，但它会在你之后被删除单击按钮旁边。

#submitStarted {
  border: solid 0px;
  border-radius: 30px;
  color: white;
  background-color: #D94C27;
  font-family: "Open Sans", Arial;
  padding: 14px 30px;
  font-weight: 450;
  font-size: 15px;
}

#submitStarted:hover,
#submitStarted:focus,
#submitStarted.active {
  cursor: pointer;
  background-color: #C92A00;
}

<input 
id="submitStarted" 
type="submit" 
value="Get Started" 
onclick="this.classList.add('active')">

---

如果你希望它在移除焦点后保持不变，你需要使用 classes 和一些 JS

onclick="this.classList.add('active')"