CheckBox CSS Styling

Smart.CheckBox is a simple HTML checkbox that offers the functionality to change it’s check state.

Required files

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.

Initialization

To create an instance of a Smart.CheckBox custom element, insert the following tag in an HTML page:

<smart-check-box></smart-check-box>

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

Before accessing the custom element’s API in JavaScript, the custom element’s instance has to be retrieved:

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)

CSS selectors

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.

CSS variables

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.