/* The container */ .container { display: block; position: relative; /*padding-left: 35px;*/ margin-bottom: 15px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Hide the browser's default checkbox */ .container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* The container */ /*slider*/ .switch { position: relative; display: inline-block; top: 10px; width: 20px; height: 25px; right: 18px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: -18px; bottom: 0; background-color: #c9c9c9; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 15px; width: 15px; left: 4px; bottom: 5px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked + .slider { background-color: #00b315; } input:focus + .slider { box-shadow: 0 0 1px #00b315; outline: 2px solid #141414; } input:checked + .slider:before { -webkit-transform: translateX(15px); -ms-transform: translateX(15px); transform: translateX(15px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } /*slider*/ /*radio button*/ /* Create a custom radio button */ .checkmarkRadio { position: absolute; top: -5px; left: 0px; height: 25px; width: 25px; background-color: #d9d9d9; border-radius: 50%; } input:focus + .checkmarkRadio { outline: 2px solid #787878; } /* On mouse-over, add a grey background color */ .container:hover input ~ .checkmarkRadio { background-color: #d9d9d9; } /* When the radio button is checked, add a blue background */ .container input:checked ~ .checkmarkRadio { background-color: #d9d9d9; } /* Create the indicator (the dot/circle - hidden when not checked) */ .checkmarkRadio:after { content: ""; position: absolute; display: none; } /* Show the indicator (dot/circle) when checked */ .container input:checked ~ .checkmarkRadio:after { display: block; } /* Style the indicator (dot/circle) */ .container .checkmarkRadio:after { top: 5px; left: 5px; width: 15px; height: 15px; border-radius: 50%; background: #00b315; } /*radio button*/