Test: Unterschied zwischen den Versionen
Aus wiki.kometin.at
Keine Bearbeitungszusammenfassung |
Keine Bearbeitungszusammenfassung |
||
| Zeile 1: | Zeile 1: | ||
<style> | |||
:root { | |||
--form-control-color: rebeccapurple; | |||
--form-control-disabled: #959495; | |||
} | |||
input[type="checkbox"] { | |||
/* Add if not using autoprefixer */ | |||
-webkit-appearance: none; | |||
/* Remove most all native input styles */ | |||
appearance: none; | |||
/* For iOS < 15 */ | |||
background-color: var(--form-background); | |||
/* Not removed via appearance */ | |||
margin: 0; | |||
font: inherit; | |||
color: currentColor; | |||
width: 1.15em; | |||
height: 1.15em; | |||
border: 0.15em solid currentColor; | |||
border-radius: 0.15em; | |||
transform: translateY(-0.075em); | |||
display: grid; | |||
place-content: center; | |||
} | |||
input[type="checkbox"]::before { | |||
content: ""; | |||
width: 0.65em; | |||
height: 0.65em; | |||
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); | |||
transform: scale(0); | |||
transform-origin: bottom left; | |||
transition: 120ms transform ease-in-out; | |||
box-shadow: inset 1em 1em var(--form-control-color); | |||
/* Windows High Contrast Mode */ | |||
background-color: CanvasText; | |||
} | |||
input[type="checkbox"]:checked::before { | |||
transform: scale(1); | |||
} | |||
input[type="checkbox"]:focus { | |||
outline: max(2px, 0.15em) solid currentColor; | |||
outline-offset: max(2px, 0.15em); | |||
} | |||
input[type="checkbox"]:disabled { | |||
--form-control-color: var(--form-control-disabled); | |||
color: var(--form-control-disabled); | |||
cursor: not-allowed; | |||
} | |||
</style> | |||
<html> | <html> | ||
<form method="post" action="/Tests/Post" style="font-family: system-ui, sans-serif;"> | <form method="post" action="/Tests/Post" style="font-family: system-ui, sans-serif;"> | ||
Version vom 29. Februar 2024, 13:16 Uhr
<style>
- root {
--form-control-color: rebeccapurple; --form-control-disabled: #959495;
}
input[type="checkbox"] {
/* Add if not using autoprefixer */ -webkit-appearance: none; /* Remove most all native input styles */ appearance: none; /* For iOS < 15 */ background-color: var(--form-background); /* Not removed via appearance */ margin: 0;
font: inherit; color: currentColor; width: 1.15em; height: 1.15em; border: 0.15em solid currentColor; border-radius: 0.15em; transform: translateY(-0.075em);
display: grid; place-content: center;
}
input[type="checkbox"]::before {
content: ""; width: 0.65em; height: 0.65em; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); transform: scale(0); transform-origin: bottom left; transition: 120ms transform ease-in-out; box-shadow: inset 1em 1em var(--form-control-color); /* Windows High Contrast Mode */ background-color: CanvasText;
}
input[type="checkbox"]:checked::before {
transform: scale(1);
}
input[type="checkbox"]:focus {
outline: max(2px, 0.15em) solid currentColor; outline-offset: max(2px, 0.15em);
}
input[type="checkbox"]:disabled {
--form-control-color: var(--form-control-disabled);
color: var(--form-control-disabled); cursor: not-allowed;
}
</style>
nachricht
- Kometin finanziert sich durch Mitgliedsbeiträge und Spenden. Mitgliedsbeiträge sind keine Miete, Entgelt für die Nutzung der Kometin!
- https://de.wikipedia.org/wiki/Selbstorganisation : Selbstorganisation ist eine Form der Systementwicklung, bei der formgebende oder gestaltende Einflüsse bei der „Evolution“ von Systemen von seinen Elementen selbst ausgehen. oda so ähnlich 😉
- Um die Herausforderungen der Selbstorganisation werden Aufgaben fair verteilt. Als Mitglied übernimmt man eine oder mehrere Aufgaben.
