Form - checkbox

Developer
Anthony Pothin
Size
3,829 Kb
Views
4,048
  1. Form - checkbox Previews
  2. Form - checkbox HTML Codes
  3. Form - checkbox CSS Codes

How do I make an form - checkbox?

What is a form - checkbox? How do you make a form - checkbox? This script and codes were developed by Anthony Pothin on 17 January 2023, Tuesday.

Form - checkbox Previews
IQ Test

Form - checkbox - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>form - checkbox</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <template id="cf-checkbox"> <style scoped="scoped"> :host { -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; -o-user-select: none; user-select: none; display:flex; flex-direction: row; align-items:center; margin-top:13px; cursor: pointer; } .checkbox { position: relative; flex: 0 0 auto; display: flex; flex-direction : row; align-items: center; justify-content: flex-start; border-radius: 12px; height: 24px; width: 48px; background-color: #999; margin-right: 10px; -webkit-transition: background-color 0.1s linear; -o-transition: background-color 0.1s linear; -moz-transition: background-color 0.1s linear; transition: background-color 0.1s linear; } :host(.checked) .checkbox { background-color: #55ACEE; } .checkbox span { flex: 0 0 auto; padding-left: 4px; color: rgba(250, 250, 250, 0.5); } .cursor { padding: 0 !important; position: absolute; top: 1px; flex: 0 0 auto; height: 22px; width: 22px; border-radius: 50%; background-color: white; } :host(:not(.checked)) .cursor { left: 1px; } :host(.checked) .cursor { right: 1px; } ::content > label { flex 1 1 0; font-size: 18px; } .icon-success:before { content: "\e607"; } [class^="icon-"], [class*=" icon-"] { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* surcharge */ cf-checkbox { -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; -o-user-select: none; user-select: none; display:flex; flex-direction: row; align-items:center; margin-top:30px; cursor: pointer; } cf-checkbox.checked .checkbox { background-color: #55ACEE; } cf-checkbox:not(.checked) .cursor { left: 1px; } cf-checkbox.checked .cursor { right: 1px; } cf-checkbox label { flex 1 1 0; font-size: 18px; } </style> <span class=checkbox> <span class="icon-success"></span> <span class="cursor"></span> </span> <content select="label"></content>
</template>
<script> var HTMLCustomCheckboxElement = (function() { var parentDoc = (document._currentScript || document.currentScript).ownerDocument; /* notifier custom form */ document.dispatchEvent(new CustomEvent('customFormElementRegistration', { bubbles: false, cancelable: false, detail: 'cf-checkbox' })); // fonctions privées var onTap = function(event) { event.currentTarget.value = !event.currentTarget.value; }; // objet custom return document.registerElement('cf-checkbox', { prototype: Object.create(HTMLElement.prototype, { // constructeur createdCallback: { value: function() { // création shadow root this.createShadowRoot(); // ajout contenu depuis le template var cloneTemplate = document.importNode(parentDoc.querySelector('template#cf-checkbox').content, true); this.shadowRoot.appendChild(cloneTemplate); // ajout event interaction // propriétés custom avec stockage caché var _value = null; Object.defineProperty(this, 'value', { configurable: false, enumerable: false, get: function() { return _value; }, set: function(value) { var oldValue = _value; _value = (value ? true : false); Object.getNotifier(this).notify({ type: 'update', name: 'value', oldValue: oldValue }); this.dispatchEvent(new Event('change')); } }); // ajout event propriété Object.observe(this, function(changes) { changes.forEach(function(change) { // change === {name (nom propriété), object (l'objet observé), type (add, update, delete), oldValue} //console.info('Object.observe', change.object, change.name, 'qui valait', change.oldValue, 'vaut désormais', change.object[change.name]); // stuff switch (change.name) { case 'value': // changer la classe if (change.object.value) { change.object.classList.add("checked"); } else { change.object.classList.remove("checked"); } break; default: break; } }); }); // initialisation if (this.hasAttribute('disabled')) { this.classList.add('disabled'); } else { this.classList.remove('disabled'); } if (this.hasAttribute('readonly')) { this.classList.add('readonly'); } else { this.classList.remove('readonly'); } this.reset(); } }, // propriétés custom name: { get: function() { return this.getAttribute('name'); }, set: function(value) { var oldValue = this.getAttribute('name'); this.setAttribute('name', value); Object.getNotifier(this).notify({ type: 'update', name: 'name', oldValue: oldValue }); } }, default: { get: function() { return this.getAttribute('default'); }, set: function(value) { var oldValue = this.getAttribute('default'); this.setAttribute('default', value); Object.getNotifier(this).notify({ type: 'update', name: 'default', oldValue: oldValue }); } }, disabled: { get: function() { return this.hasAttribute('disabled'); }, set: function(value) { var oldValue = this.hasAttribute('disabled'); if (value) { this.setAttribute('disabled', 'disabled'); } else { this.removeAttribute('disabled'); } Object.getNotifier(this).notify({ type: 'update', name: 'disabled', oldValue: oldValue }); } }, readOnly: { get: function() { return this.hasAttribute('readonly'); }, set: function(value) { var oldValue = this.hasAttribute('readonly'); if (value) { this.setAttribute('readonly', 'readonly'); } else { this.removeAttribute('readonly'); } Object.getNotifier(this).notify({ type: 'update', name: 'readonly', oldValue: oldValue }); } }, // méthodes custom reset: { value: function() { this.value = this.default; } }, checkValidity: { value: function() { return true; } }, // méthode exécuté à chaque insertion de l'élément custom attachedCallback: { value: function() { // création des méthodes bindées // ajout des events FOCUS this.addEventListener('tap', onTap, false); } }, // méthode exécuté à chaque détachement de l'élément custom detachedCallback: { value: function() { // retrait des events INPUT // retrait des events FOCUS this.removeEventListener('tap', onTap, false); // suppression des méthodes bindées } }, // méthode exécuté quand un attribut est modifié attributeChangedCallback: { value: function(attrName, oldValue, newValue) { //console.info('attributeChangedCallback', this, attrName, 'qui valait', oldValue, 'vaut désormais', newValue); switch (attrName) { case 'name': case 'label': case 'default': break; case 'disabled': if (this.hasAttribute('disabled')) { this.classList.add('disabled'); } else { this.classList.remove('disabled'); } case 'readonly': if (this.hasAttribute('readonly')) { this.classList.add('readonly'); } else { this.classList.remove('readonly'); } break; } } } }) }); })();
</script>
</body>
</html>

Form - checkbox - Script Codes CSS Codes

 :host { -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; -o-user-select: none; user-select: none; display:flex; flex-direction: row; align-items:center; } span.checkbox { display: flex; -moz-border-radius: 50%; border-radius: 50%; height: 40px; width: 40px; cursor: pointer; background-color: #999; padding: 0px; margin-right: 10px; } .checked { color: #E78B80; -webkit-transition: background-color 0.4s linear; -o-transition: background-color 0.4s linear; -moz-transition: background-color 0.4s linear; transition: background-color 0.4s linear; } /* surcharge */
Form - checkbox - Script Codes
Form - checkbox - Script Codes
Home Page Home
Developer Anthony Pothin
Username Thorien
Uploaded January 17, 2023
Rating 3
Size 3,829 Kb
Views 4,048
Do you need developer help for Form - checkbox?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Anthony Pothin (Thorien) Script Codes
Name
Test moment.js
A Pen by Anthony Pothin
Demo component
Form - datetime picker
Flexible accordion
Responsive slide
Custom scrollbar
Form - form
Multipart data parsing
Tab bar
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!