cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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.

Quick-add: + add another resource

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.

Quick-add: + add another resource

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.

            
                <form>
<fieldset>
  <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>

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

<p>Unlike other css-stylable checkboxes, this one does not break the element&rsquo;s behavior.</p>
<ul>
  <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>
</ul>
            
          
!
            
              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;
}
            
          
!
999px
Loading ..................

Console