Here you can find examples of how to create switches on Firefox OS, as well as downloads for the CSS and image resources used by the built-in apps on Firefox OS. You can copy these resources into your app and make use of them to build apps that match these apps' appearances.
Implementing switches
To implement a switch using the style shown here, place the CSS and media files into your app and then import the CSS using the @import
at-rule:
@import url(resources/switches.css);
Make sure the media files are in the location expected by the CSS (either by placing them in a corresponding location or by revising the CSS).
Switch sampler
HTML: Checkboxes
Below are a few checkboxes. These are simple <input>
elements of type checkbox
. You can get the red style of checkbox, used for example to mark messages for deletion, by adding the class "danger" to the label surrounding the checkbox.
<h2 class="bb-docs">Checkbox, commonly used in edit mode</h2> <label class="pack-checkbox"> <input type="checkbox" checked> <span></span> </label> <label class="pack-checkbox"> <input type="checkbox"> <span></span> </label> <label class="pack-checkbox danger"> <input type="checkbox" checked> <span></span> </label> <label class="pack-checkbox danger"> <input type="checkbox"> <span></span> </label>
HTML: Radio buttons
Below are examples of radio buttons; these are standard <input>
elements of type radio.
<h2 class="bb-docs">Radio, commonly used in settings</h2> <label class="pack-radio"> <input type="radio" name="example" checked> <span></span> </label> <label class="pack-radio"> <input type="radio" name="example"> <span></span> </label> <label class="pack-radio"> <input type="radio" name="example"> <span></span> </label> <label class="pack-radio danger"> <input type="radio" name="example2" checked> <span></span> </label> <label class="pack-radio danger"> <input type="radio" name="example2"> <span></span> </label> <label class="pack-radio danger"> <input type="radio" name="example2"> <span></span> </label>
HTML: Toggle switches
Toggle switches are commonly used in settings contexts to represent enabling and disabling a feature or service.
<h2 class="bb-docs">Switch, commonly used in settings</h2> <label class="pack-switch"> <input type="checkbox" data-type="switch" checked> <span></span> </label> <label class="pack-switch"> <input type="checkbox" data-type="switch"> <span></span> </label>
CSS
@import url(https://developer.mozilla.org/media/gaia/shared/style/switches.css); @import url('https://developer.mozilla.org/media/css/gaia.css'); html, body { margin: 0; padding: 0; font-size: 10px; height: 100%; overflow-x: hidden; background: #000 url(https://mdn.mozillademos.org/files/4655/fx_logo_white_backdrop.jpg) fixed; } body { background: none; }
h2.bb-docs { font-size: 1.8rem; font-family: "MozTT", Sans-serif; font-weight: lighter; color: #666; margin: -1px 0 0; background-color: #f5f5f5; padding: 0.4rem 0.4rem 0.4rem 3rem; border: solid 1px #e8e8e8; }
Working demo
You can try out the switches in this live demonstration.
Firefox OS live demos generally require a Gecko-based browser, and work best in recent builds of Firefox.