Twine Checkbox styling

Authoring Twine
1

Hello, I am somewhat new to twine and I am hoping someone could guide me. I’m trying to change the style of a checkbox and make it look like a switch using the style sheet and a hint of java. I know this is a thing but i don’t know how to set it up.

Any advice would be really appreciated—thanks!

2

This is a dirty solution. $toggle can be whatever variable you want to switch back and forth with true or false.

(set: $toggle to false)

{
<style>
.switch {
	position: relative;
	display: inline-block;
	width: 60px; height: 34px;
}
.switch input {
	opacity: 0;
	width: 0; height: 0;
}
.slider {
	position: absolute;
	cursor: pointer;
	top: 0; left: 0; right: 0; bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
    border-radius: 34px;
}
.slider:before {
	position: absolute;
	content: "";
	width: 26px; height: 26px; 
    left: 4px; bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}
input:checked + .slider {
	background-color: #2196F3;
}
input:focus + .slider {
	box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}
</style>

<script>
window.switch1 = function (element) {
	if (element == undefined) return;
	if (element.checked) {
		$toggle = "true";
	} else {
		$toggle = "false";
	}
}
</script>

(if: $toggle)[
	<label class="switch">\
		<input type="checkbox" onclick="switch1(this)" checked>\
		<span class="slider"></span>\
	</label>\
](else:)[
	<label class="switch">\
		<input type="checkbox" onclick="switch1(this)">\
		<span class="slider"></span>\
	</label>\
]
}

(link-rerun: "Check Harlowe TOGGLE Value")[ <br> (print: $toggle) ]

This will set itself to the proper state of the $toggle variable as well. Change the $toggle variable to true at the top and the checkbox will render properly.

The “Check Harlowe TOGGLE Value” link is just for testing to see if Harlowe understands the new value being set.

What I prefer is if I would find a way to style Harlowe’s rendered HTML structure with it’s native (checkbox:) macro, but I’m too tuckered to figure that out right now. Harlowe doesn’t wrap the <label> around the <input> tag so Making it render in a customized way makes it a bit harder to figure out.

This style was grabbed from W3Schools.

→ https://www.w3schools.com/howto/howto_css_switch.asp

2 Likes