function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Salesforce developer 11Salesforce developer 11 

When we replace checkbox to switchery in Visualforce page

                             <td class="nopadding">
								
								    Before I am use this checkbox and work fine.
									
                              <!--   <apex:inputCheckbox id="client1-q13-ans1" value="{!test.Answer_13__c}" />-->
									
									Now i am use this Switchery but this not work please any help .
									.Js-switch{
										height: 0;
										width: 0;
										visibility: hidden;
										}

										.LabelClass {
										cursor: pointer;
										text-indent: -9999px;
										width: 45px;
										height: 25px;
										background: grey;
										display: block;
										border-radius: 120px;
										position: relative;
										}

										.LabelClass:after {
										content: '';
										position: absolute;
										top: 2px;
										left: 2px;
										width: 21px;
										height: 21px;
										background: #fff;
										border-radius: 100px;
										transition: 0.2s;
										}

										.Js-switch:checked + .LabelClass {
										background: #008000;
										}

										.Js-switch:checked + .LabelClass:after {
										left: calc(100% - 2px);
										transform: translateX(-100%);
										}

										.LabelClass:active:after {
										width: 20px;
										}

										.nopadding {
											padding : 0 !important;
											}

									
                                      <input type="checkbox"   class="Js-switch" id="client1-q13-ans1" value="{!test.Answer_13__c}" /><label class="LabelClass" for="client1-q13-ans1"></label>

                                </td>

 
Ajay K DubediAjay K Dubedi
Hi, 

Below Sample code can fullfill your requirements. Hope this will work for you.

<html>
<head>
<style>
.form-switch {
  display: inline-block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.form-switch i {
  position: relative;
  display: inline-block;
  margin-right: .5rem;
  width: 46px;
  height: 26px;
  background-color: #e6e6e6;
  border-radius: 23px;
  vertical-align: text-bottom;
  transition: all 0.3s linear;
}

.form-switch i::before {
  content: "";
  position: absolute;
  left: 0;
  width: 42px;
  height: 22px;
  background-color: #fff;
  border-radius: 11px;
  transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
  transition: all 0.25s linear;
}

.form-switch i::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 22px;
  background-color: #fff;
  border-radius: 11px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
  transform: translate3d(2px, 2px, 0);
  transition: all 0.2s ease-in-out;
}

.form-switch:active i::after {
  width: 28px;
  transform: translate3d(2px, 2px, 0);
}

.form-switch:active input:checked + i::after { transform: translate3d(16px, 2px, 0); }

.form-switch input { display: none; }

.form-switch input:checked + i { background-color: #4BD763; }

.form-switch input:checked + i::before { transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0); }

.form-switch input:checked + i::after { transform: translate3d(22px, 2px, 0); }
</style>
</head>
<body>
<label class="form-switch">
  <input type="checkbox">
  <i></i>
  Select Me
</label>

</body>
</html>

Please mark this as best answer if this solves your problem.

Thank you
Ajay Dubedi