wordpress 联系表 7 中的切换开关

Question

我想创建一个类似于所附图像的切换开关。

它需要与联系表 7 集成作为选择字段。我希望访问者选择（在本例中）“ik ben op zoek naar werk”或“ik ben op zoek naar Talent”，并通过联系表单电子邮件发送结果及其详细信息。为名称创建文本字段没有问题。但制作拨动开关是。

我只能制作复选框或单选按钮。但我不知道如何更改设计/CSS，使其看起来像一个切换开关。现在看起来像这样：

我想我需要更改复选框或单选按钮的CSS代码，使其看起来像一个切换开关

我发现这个页面有设计，但它没有“发送”结果“向左或向右” https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_switch

Answer 1

要实现所需的结果，您需要向复选框添加一个类（togglebuttons），如下所示 [checkbox checkbox-932 class:togglebuttons use_label_element ""]。

然后将 CSS 添加到子主题

    .togglebuttons .wpcf7-list-item {
  margin: 0 2px 0 0;
  display: inline-block;
}

.togglebuttons > span input[type="checkbox"] {
  opacity: 0;
  position: absolute;
}

.togglebuttons > span .wpcf7-list-item-label {
  cursor: pointer;
  display: inline-block; 
  color: #333;
  border-radius: 30px; 
  background: #efefef;
  padding: 15px 30px; 
  position: relative; /
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  /*border: 1px solid #e0e0e0;*/
  transition: background 0.3s, border 0.3s, color 0.3s;
}

.togglebuttons > span input[type="checkbox"]:checked + .wpcf7-list-item-label {
  background: #27396A; 
  color: #ffffff;
}


.togglebuttons > span input[type="checkbox"] + .wpcf7-list-item-label::before {
  content: '';
  display: block;
  position: absolute;
  width: 20px;
  height: 20px; 
  background: #ffffff; 
  border-radius: 50%; 
  top: 50%;
  left: 25%; 
  transform: translate(-50%, -50%);
  transition: left 0.3s; 
}


.togglebuttons > span input[type="checkbox"]:checked + .wpcf7-list-item-label::before {
  content: '';
  display: block;
  position: absolute;
  width: 20px; 
  height: 20px; 
  background: #ffffff; 
  border-radius: 50%; 
  top: 50%;
  left: 75%; 
  transform: translate(-50%, -50%);
  transition: left 0.3s; 
}