59 lines
1.3 KiB
CSS
59 lines
1.3 KiB
CSS
/* Using switch widget as a radio button:
|
|
Slider button is transparent and as the switch
|
|
state is changed eg checked or unchecked the switch
|
|
background image changes instead. */
|
|
|
|
|
|
/* Unchecked, or switched off background. Changing "color:" to transparent
|
|
hides the off and on symbols */
|
|
|
|
switch {
|
|
min-width: 100px;
|
|
min-height: 24px;
|
|
color: transparent;
|
|
outline-offset: -4px;
|
|
background-color: transparent;
|
|
background-image: url("assets/switch.png"); }
|
|
|
|
|
|
/* Checked, or switched on background */
|
|
|
|
|
|
switch:checked {
|
|
min-width: 100px;
|
|
min-height: 24px;
|
|
color: transparent;
|
|
outline-offset: -4px;
|
|
background-color: transparent;
|
|
background-image: url("assets/switch_checked.png"); }
|
|
|
|
|
|
/* Disabled, switched on background */
|
|
|
|
|
|
switch:checked :disabled {
|
|
min-width: 100px;
|
|
min-height: 24px;
|
|
color: transparent;
|
|
outline-offset: -4px;
|
|
background-color: transparent;
|
|
background-image: url("assets/switch_checked_disabled.png"); }
|
|
|
|
|
|
/* Disabled, switched off background */
|
|
|
|
|
|
switch:disabled {
|
|
color: transparent;
|
|
outline-offset: -4px;
|
|
background-color: transparent;
|
|
background-image: url("assets/switch_disabled.png"); }
|
|
|
|
|
|
/* Make switch button transparent */
|
|
|
|
switch slider {
|
|
background-color: transparent; }
|
|
|
|
switch:disabled slider {
|
|
background-color: transparent; } |