TOGGLE BUTTON

  • Resolved Graicifyd

    (@graicifyd)


    4 years, 8 months ago

    Thank you for an amazing plugin.

    I know Calculated Field Form does not have a toggle button or switch but is there a way to make a radio button act like one?

    Thank you for your support.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author codepeople

    (@codepeople)

    Hello @graicifyd

    That’s possible with some styles.

    Insert a radio button field with two choices, and assign to it a class names, for example: switch

    And then, enter the following style definition through the “Customize Form Design” attribute in the “Form Settings” tab (https://cff.dwbooster.com/images/documentation/form-settings-tab.png)

    
.switch .dfield div{
  clear:none !important;
  float: left !important;
}
.switch input {
  display:none;
}
.switch label span {
  background-color: #e4e4e4;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  line-height: 1;
  text-align: center;
  padding: 8px 16px;
  margin-right: -1px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  transition: all 0.1s ease-in-out;
}
.switch .dfield label span:hover {
  cursor: pointer;
}
.switch .dfield input:checked + span {
  background-color: #a5dc86;
  box-shadow: none;
}

    Of course, defining the preferred appearance.
    Best regards.

    Thread Starter Graicifyd

    (@graicifyd)

    Thank you!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘TOGGLE BUTTON’ is closed to new replies.