Question

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

我使用Gravity Forms构建了表单，并定制了CSS以使其具有这种外观。这两个“按钮”实际上是单选按钮。

我没有访问HTML的权限，因此仅CSS的修复效果会很好（除非您知道如何编辑重力表单的HTML）！

提前了解帮助：）

Answer 1

您只需要将:focus添加到用于那些单选按钮的任何CSS类中，请遵循以下示例，

.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

由于单选按钮在单击按钮时被选中，因此可以使用复选框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;
}

这将选择名称为“ input_11”的输入的带有标签标签的下一个同级，并更改其背景颜色。我使用的是name =“ input_11”，因为那是您网站上的单选按钮。

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

3 个答案: