1

对于此页面上的表格：http: //16q.47c.myftpupload.com/get-a-quote/ 我想让按钮“往返”/“单程”，单击时保持红色背景。

我使用 Gravity Forms 构建表单并自定义 CSS 以使其看起来如此。这两个“按钮”实际上是单选按钮。

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

提前感谢帮助:)

4

3 回答 3

1

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

.btnbtn{
background-color:blue;
}

.btnbtn:focus{
background-color:red;
}
<html>
<body>
<button class="btnbtn">abcd</button>
</body>
</html>

这应该可以完美地工作。

于 2018-09-08T05:17:14.440 回答
0

由于单击按钮时会选择单选按钮，因此您可以使用复选框 hack(radio button 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;
}

这将选择 name="input_11" 输入的标签标签的下一个兄弟并更改其背景颜色。我使用 name="input_11" 因为这就是您网站中的单选按钮。

于 2018-09-08T07:02:37.720 回答
0

如果您可以访问 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>

于 2018-09-08T05:21:06.520 回答