css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  <legend>Thanks for signing up!</legend>
<div class="labeledCheckbox">
  <input type="checkbox" id="emailList" name="emailList" value="" checked>
  <label for="emailList">I would like to receive occasional e-mails</label>

<div class="labeledCheckbox">
  <input type="checkbox" id="catalogList" name="catalogList" value="" checked>
  <label for="catalogList">Please send me a catalog</label>

<p>Unlike other css-stylable checkboxes, this one does not break the element&rsquo;s behavior.</p>
  <li>You can tab/shift-tab between the checkboxes (after clicking inside the results window of this demo)</li>
  <li>You get a focus outline, so you know where you are</li>
  <li>The style of the focus outline is the native style of the browser you are using (i.e. blurred blue for Chrome and Safari, dotted black for Firefox)</li>
  <li>While focused, you can check/uncheck using the spacebar</li>
  <li>You can check/uncheck by using the mouse to click on the box itself, or on the box&rsquo;s label</li>
  <li>Browsers which do not support some variation of the appearance property revert to default checkbox styling (so no harm done)</li>
              html {
  font-family: 'Alegreya Sans', 'Droid Sans', Arial, sans-serif;

body {
  margin: 1em 2em 0 2em

fieldset {
  margin: 1em 0 0 0;

p {
  margin: 1em 0 0 0;

/* user-select prevents accidentally selecting text when clicking on the checkbox label */
.labeledCheckbox {
  margin: 0.5em 0 0.5em 1em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;

.labeledCheckbox input {
  margin-right: 0.6em;

.labeledCheckbox label {
  font-size: 1em;

 *	The use of the appearance property was suggested by an article by Danny Markov at:
 *		http://tutorialzine.com/2015/07/quick-tip-style-form-elements-with-pseudo-selectors/
 *	The appearance property has never been fully implemented by any browser, and is considered
 *	problematic. However, as of December 2016, there is now some talk of instituting a limited form:
 *		https://drafts.csswg.org/css-ui-4/#appearance-switching
 *	This works on:
 *		Mac
 *			Safari
 *			Chrome
 *			Opera
 *		Windows
 *			IE
 *			Chrome
 *		iOS
 *			Safari
 *			Chrome
 *			Opera
 *			Firefox
 *	IOW, it works in everything except desktop Firefox (not tested on Android).
 *	The strange thing about Firefox is that -moz-appearance does not work the same as -webkit-appearance.
 *	If -moz-appearance is omitted altogether, the default rounded/shaded blue checkbox is used, as expected.
 *	But when -moz-appearance is included, it does have some effect: it styles the box with a 2px gray inset border,
 *	white background,	and its own checkmark character, but it does allow you to specify your own height and width.
 *	In the case of this particular site, I judged that this compromise is still better than the default,
 *	and so kept -moz-appearance in the css.

input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  vertical-align: -0.35em;
  /* align box with the text label */
  width: 1.35em;
  height: 1.35em;
  color: #000;
  background-color: #fff;
  border-width: 1px;
  border-style: solid;
  border-color: #888 #bbb #bbb #888;

input[type="checkbox"]::after {
  content: "\a0";  /* Non-breaking space */
  position: absolute;
  font-size: 0.9em;
  left: 0.3em;
  top: 0.2em;

 *	Add check mark character when the checkbox is checked.
 * 	Unfortunately, the alignment of the check mark within the box varied from browser to browser,
 *	(mainly iOS browsers differ from desktop browsers)

input[type="checkbox"]:checked::after {
  content: "\2713";  /* Check mark character */

input[type="checkbox"]:active {
  background-color: #eee;
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................