希望我的按钮在单击时保持黑色

Question

对于此页面上的表单：http://16q.47c.myftpupload.com/get-a-quote/ 我想让按钮 "Round Trip" / "One Way" 在单击时保持红色背景。

我使用 Gravity Forms 构建表单并自定义 CSS 以使其看起来像那样。那 2 "buttons" 实际上是单选按钮。

我无权访问 HTML，因此仅 CSS 的修复会很棒（除非您知道如何编辑重力形式的 HTML）！

提前感谢您的帮助:)

Answer 1

您只需将 :focus 添加到您用于这些单选按钮的任何 css class 中，按照下面给出的示例，

.btnbtn{
background-color:blue;
}

.btnbtn:focus{
background-color:red;
}

<html>
<body>
<button class="btnbtn">abcd</button>
</body>
</html>

这应该可以完美运行。

Answer 2

如果您可以访问 CSS，请尝试添加单选按钮 :checked 选项并将 background-color 设置为红色。

只需查看代码片段并尝试执行即可。

/*https://codepen.io/kevinfarrugia/pen/pJZezE*/

.hungry .selection {
  margin-bottom: 1em;
}

.hungry .selection label {
  display: inline-block;
  width:8em;
  background-color: #42b4d6;
  border-radius: 6px;
  color: #ffffff;
  padding: 0.5em;
  cursor: pointer;
}

.hungry .selection label:hover {
  background-color: #5fc0dc;
}

.hungry .selection input[type=radio] {
  display: none;
}

.hungry .selection input[type=radio]:checked ~ label {
  background-color: #f1592a;
}

<div class="hungry">
  <div class="selection">
    <input id="pizza" name="hungry" type="radio">
    <label for="pizza">Pizza</label>
  </div>
  <div class="selection">
    <input id="burger" name="hungry" type="radio">
    <label for="burger">Burger + Chips</label>
  </div>
  <div class="selection">
    <input id="bread" name="hungry" type="radio">
    <label for="bread">Hobz biz-zejt!</label>
  </div>
</div>

Answer 3

由于单选按钮在您单击按钮时得到 selected，因此您可以使用复选框 hack（单选按钮 hack）

input[name="input_11"]:checked + #label_2_11_0,
input[name="input_11"]:checked + #label_2_11_1 {
  background-color: #8d181b !important;
  color: white !important;
}

这将 select 带有 name="input_11" 的输入的标签标签的下一个同级，并更改它的背景颜色。我正在使用 name="input_11" 因为那是您网站上的单选按钮。

希望我的按钮在单击时保持黑色

Want my Button to remain dark when clicked

css

gravityforms