CheckBox CSS Styling
Smart.CheckBox is a simple HTML checkbox that offers the functionality to change it’s check state.
The Smart.CheckBox element requires the following file references to be placed on a web page in order for the custom element to be successfully registered and properly working:
- smart.element.js — this is the base file that defines the common architecture of all Smart custom elements. It is part of the repository ni-kismet/smart-element.
- smart.button.js — this file defines the functionality of the Smart.Button custom element. Smart.CheckBox inherits Smart.Button custom element.
- smart.checkbox.js — this file defines the functionality of the Smart.CheckBox custom element.
Smart.CheckBox also requires the following style sheets in order to be displayed correctly.
- smart.base.css — the base style sheet file.
To create an instance of a Smart.CheckBox custom element, insert the following tag in an HTML page:
To set properties of the custom element initially, do so by setting the respective attributes of the tag, e.g.:
<smart-check-box checked name="checkbox1" disabled right-to-left ></smart-check-box>
Getting and setting properties dynamically
let customElement = document.querySelector('smart-check-box');
Properties are represented as members of the custom element’s instance object and can be accessed as such.
Here is an example showing how to get a property dynamically:
let checked = customElement.checked;
Here is an example showing how to set a property dynamically:
customElement.checked = true;
Styling (CSS API)
The following CSS selectors can be used to style Smart.CheckBox:
smart-check-box – the element itself. Can be used to set width and height for the whole element.
- .smart-container – the container that holds all of the internals of the element. Shoudn’t be used for styling.
- .smart-animation – a container used purely for animation.
- .smart-input – an HTML Span element used as the check box input.
- .smart-label – an HTML Span element used as a label for the check box.
- INPUT element – an HTML Input element used when submiting forms when a value is applied to the element.
Smart.CheckBox uses the following CSS variable:
- –smart-check-box-default-size – a CSS variable used to set the default width and height of the element. Default value is 14px.