Newer
Older
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../components/asset-builds/css/base.css">
<link rel="stylesheet" href="../components/asset-builds/css/layouts.css">
<link rel="stylesheet" href="../components/asset-builds/css/styles.css">
<link rel="stylesheet" href="../components/asset-builds/css/chroma-kss-styles.css">
<link rel="stylesheet" href="../components/asset-builds/css/kss-only.css">
<link rel="stylesheet" href="../components/asset-builds/css/breadcrumb.css">
<link rel="stylesheet" href="../components/asset-builds/css/components.css">
<link rel="stylesheet" href="../components/asset-builds/css/footer.css">
<link rel="stylesheet" href="../components/asset-builds/css/messages.css">
<link rel="stylesheet" href="../components/asset-builds/css/skip-link.css">
<link rel="stylesheet" href="../components/asset-builds/css/visually-hidden.css">
</head>
<body id="kss-node">
<div class="kss-sidebar kss-style">
<header class="kss-header">
</header>
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<span class="kss-nav__ref">0</span
><span class="kss-nav__name">Overview</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-sass.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Colors and Sass</span>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Defaults</span>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layouts.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
<a class="kss-nav__menu-link" href="section-components.html">
<span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-navigation.html">
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html">
<span class="kss-nav__ref">6</span><span class="kss-nav__name">Forms</span>
<ul class="kss-nav__menu-child">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base">
><span class="kss-nav__name">Form defaults</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-button">
<span class="kss-nav__ref kss-nav__ref-child">6.1.1</span
><span class="kss-nav__name">Buttons</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-fieldset">
<span class="kss-nav__ref kss-nav__ref-child">6.1.2</span
><span class="kss-nav__name">Fieldsets</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-input">
<span class="kss-nav__ref kss-nav__ref-child">6.1.3</span
><span class="kss-nav__name">Inputs</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-input-checkbox">
<span class="kss-nav__ref kss-nav__ref-child">6.1.4</span
><span class="kss-nav__name">Checkboxes</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-input-radio">
<span class="kss-nav__ref kss-nav__ref-child">6.1.5</span
><span class="kss-nav__name">Radio buttons</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-label">
<span class="kss-nav__ref kss-nav__ref-child">6.1.6</span
><span class="kss-nav__name">Labels</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-select">
<span class="kss-nav__ref kss-nav__ref-child">6.1.7</span
><span class="kss-nav__name">Select list</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-textarea">
<span class="kss-nav__ref kss-nav__ref-child">6.1.8</span
><span class="kss-nav__name">Text areas</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-autocomplete">
><span class="kss-nav__name">Autocomplete field</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-button">
><span class="kss-nav__name">Button</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-collapsible-fieldset">
><span class="kss-nav__name">Collapsible fieldset</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-form-item">
><span class="kss-nav__name">Form item</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-form-item--radio">
><span class="kss-nav__name">Form item (radio)</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-form-table">
><span class="kss-nav__name">Drupal admin tables</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-progress-bar">
><span class="kss-nav__name">Progress bar</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-progress-throbber">
><span class="kss-nav__name">Progress throbber</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-resizable-textarea">
><span class="kss-nav__name">Resizable textarea</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-table-drag">
><span class="kss-nav__name">Table drag</span>
</a>
</li>
</ul>
</nav>
</div>
<article role="main" class="kss-main">
<div id="kssref-forms" class="kss-section kss-section--depth-1">
<div class="kss-style">
<h1 class="kss-title kss-title--level-1">
<a class="kss-title__permalink" href="#kssref-forms">
<span class="kss-title__ref">
<span class="kss-title__permalink-hash">
forms
</span>
</span>
Forms
</a>
</h1>
<div class="kss-description">
<p>Form components are specialized design components that are applied to forms
</div>
</div>
<section id="kssref-forms-base" class="kss-section kss-section--depth-2">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-forms-base">
<span class="kss-title__ref">
<span class="kss-title__permalink-hash">
forms.base
</span>
</span>
Form defaults
</a>
</h2>
<div class="kss-description">
<p>These are the default base styles applied to HTML form elements.</p>
<p>Component classes can override these styles, but if no class applies a style
to an HTML form element, these styles will be the ones displayed.</p>
</div>
</section>
<section id="kssref-forms-base-button" class="kss-section kss-section--depth-3">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-forms-base-button">
<span class="kss-title__ref">
<span class="kss-title__permalink-hash">
forms.base.button
</span>
</span>
Buttons
</a>
</h3>
<div class="kss-description">
<p>Buttons built with the <code><button></code> element are the most flexible for styling
purposes. But <code><input></code> elements with <code>type</code> set to <code>submit</code>, <code>image</code>,
<code>reset</code>, or <code>button</code> are also supported.</p>
<p>Below is the default button styling. To see variations on the button styling
see the <a href="section-forms.html#kssref-forms-button">button component</a>.</p>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Examples </div>
<div class="kss-modifier__default-name kss-style">
Default styling
</div>
<div class="kss-modifier__example">
<p>
<button type="button" class="[modifier class]">Standard button</button>
<button type="button" class="[modifier class]" disabled>disabled button</button>
</p>
<p>
<button type="submit" class="[modifier class]">Submit button</button>
<button type="submit" class="[modifier class]" disabled>Disabled submit button</button>
</p>
<p>
<button type="reset" class="[modifier class]">Reset button</button>
<button type="reset" class="[modifier class]" disabled>Disabled reset button</button>
</p>
<p>
<input type="button" class="[modifier class]" value="Input button">
<input type="button" class="[modifier class]" value="Disabled input button" disabled>
</p>
<p>
<input type="submit" class="[modifier class]" value="Input submit button">
<input type="submit" class="[modifier class]" value="Disabled input submit button" disabled>
</p>
<p>
<input type="reset" class="[modifier class]" value="Input reset button">
<input type="reset" class="[modifier class]" value="Disabled input reset button" disabled>
</p>
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
</div>
<div class="kss-modifier__name kss-style">
:hover
</div>
<div class="kss-modifier__description kss-style">
Hover styling.
</div>
<div class="kss-modifier__example">
<p>
<button type="button" class="pseudo-class-hover">Standard button</button>
<button type="button" class="pseudo-class-hover" disabled>disabled button</button>
</p>
<p>
<button type="submit" class="pseudo-class-hover">Submit button</button>
<button type="submit" class="pseudo-class-hover" disabled>Disabled submit button</button>
</p>
<p>
<button type="reset" class="pseudo-class-hover">Reset button</button>
<button type="reset" class="pseudo-class-hover" disabled>Disabled reset button</button>
</p>
<p>
<input type="button" class="pseudo-class-hover" value="Input button">
<input type="button" class="pseudo-class-hover" value="Disabled input button" disabled>
</p>
<p>
<input type="submit" class="pseudo-class-hover" value="Input submit button">
<input type="submit" class="pseudo-class-hover" value="Disabled input submit button" disabled>
</p>
<p>
<input type="reset" class="pseudo-class-hover" value="Input reset button">
<input type="reset" class="pseudo-class-hover" value="Disabled input reset button" disabled>
</p>
</div>
<div class="kss-modifier__name kss-style">
:active:hover
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
<div class="kss-modifier__description kss-style">
Depressed button styling.
</div>
<div class="kss-modifier__example">
<p>
<button type="button" class="pseudo-class-active pseudo-class-hover">Standard button</button>
<button type="button" class="pseudo-class-active pseudo-class-hover" disabled>disabled button</button>
</p>
<p>
<button type="submit" class="pseudo-class-active pseudo-class-hover">Submit button</button>
<button type="submit" class="pseudo-class-active pseudo-class-hover" disabled>Disabled submit button</button>
</p>
<p>
<button type="reset" class="pseudo-class-active pseudo-class-hover">Reset button</button>
<button type="reset" class="pseudo-class-active pseudo-class-hover" disabled>Disabled reset button</button>
</p>
<p>
<input type="button" class="pseudo-class-active pseudo-class-hover" value="Input button">
<input type="button" class="pseudo-class-active pseudo-class-hover" value="Disabled input button" disabled>
</p>
<p>
<input type="submit" class="pseudo-class-active pseudo-class-hover" value="Input submit button">
<input type="submit" class="pseudo-class-active pseudo-class-hover" value="Disabled input submit button" disabled>
</p>
<p>
<input type="reset" class="pseudo-class-active pseudo-class-hover" value="Input reset button">
<input type="reset" class="pseudo-class-active pseudo-class-hover" value="Disabled input reset button" disabled>
</p>
<div class="kss-markup kss-style">
<pre class="prettyprint linenums lang-html"><code data-language="html"><p>
<button type="button" class="[modifier class]">Standard button</button>
<button type="button" class="[modifier class]" disabled>disabled button</button>
</p>
<p>
<button type="submit" class="[modifier class]">Submit button</button>
<button type="submit" class="[modifier class]" disabled>Disabled submit button</button>
</p>
<p>
<button type="reset" class="[modifier class]">Reset button</button>
<button type="reset" class="[modifier class]" disabled>Disabled reset button</button>
</p>
<p>
<input type="button" class="[modifier class]" value="Input button">
<input type="button" class="[modifier class]" value="Disabled input button" disabled>
</p>
<p>
<input type="submit" class="[modifier class]" value="Input submit button">
<input type="submit" class="[modifier class]" value="Disabled input submit button" disabled>
</p>
<p>
<input type="reset" class="[modifier class]" value="Input reset button">
<input type="reset" class="[modifier class]" value="Disabled input reset button" disabled>
</p>
</code></pre>
</div>
</section>
<section id="kssref-forms-base-fieldset" class="kss-section kss-section--depth-3">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-forms-base-fieldset">
<span class="kss-title__ref">
<span class="kss-title__permalink-hash">
forms.base.fieldset
</span>
</span>
Fieldsets
</a>
</h3>
<div class="kss-description">
<p>The <code><fieldset></code> element groups a set of form fields, optionally under a
common name given by the <code><legend></code> element.</p>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example </div>
<div class="kss-modifier__example">
<fieldset class="">
<legend>A fieldset</legend>
<label for="fieldsetText">Text input</label>
<input type="text" id="fieldsetText" placeholder="Text input">
</fieldset>
<fieldset class="" disabled>
<legend>A disabled fieldset</legend>
<div>
<label for="fieldsetText2">Disabled text input</label>
<input type="text" id="fieldsetText2" placeholder="Disabled input">
</div>
<div>
<label for="fieldsetSelect">Disabled select menu</label>
<select id="fieldsetSelect">
<option>Disabled select</option>
</select>
</div>
<div>
<label><input type="checkbox"> Can't check this</label>
</div>
</fieldset>
<div class="kss-markup kss-style">
<pre class="prettyprint linenums lang-html"><code data-language="html"><fieldset class="">
<legend>A fieldset</legend>
<label for="fieldsetText">Text input</label>
<input type="text" id="fieldsetText" placeholder="Text input">
</fieldset>
<fieldset class="" disabled>
<legend>A disabled fieldset</legend>
<div>
<label for="fieldsetText2">Disabled text input</label>
<input type="text" id="fieldsetText2" placeholder="Disabled input">
</div>
<div>
<label for="fieldsetSelect">Disabled select menu</label>
<select id="fieldsetSelect">
<option>Disabled select</option>
</select>
</div>
<div>
<label><input type="checkbox"> Can't check this</label>
</div>
</fieldset>
</code></pre>
</div>
</section>
<section id="kssref-forms-base-input" class="kss-section kss-section--depth-3">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-forms-base-input">
<span class="kss-title__ref">
<span class="kss-title__permalink-hash">
forms.base.input
</span>
</span>
Inputs
</a>
</h3>
<div class="kss-description">
<p>The <code><input></code> element is mostly used for text-based inputs that include the
HTML5 types: <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code>, <code>email</code>, <code>password</code>, <code>date</code>,
<code>time</code>, <code>number</code>, <code>range</code>, <code>color</code>, and <code>file</code>.</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example </div>
<div class="kss-modifier__example">
<div>
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
<label for="inputText">Text</label>
<input type="text" class="" id="inputText" placeholder="Enter some text">
</div>
<div>
<label for="inputSearch">Search</label>
<input type="search" class="" id="inputSearch" placeholder="Search">
</div>
<div>
<label for="inputTel">Telephone</label>
<input type="text" class="" id="inputTel" placeholder="Enter some text">
</div>
<div>
<label for="inputURL">URL</label>
<input type="url" class="" id="inputURL" placeholder="Enter a URL">
</div>
<div>
<label for="inputEmail">Email address</label>
<input type="email" class="" id="inputEmail" placeholder="Enter email">
</div>
<div>
<label for="inputPassword">Password</label>
<input type="password" class="" id="inputPassword" placeholder="Password">
</div>
<div>
<label for="inputDate">Date</label>
<input type="date" class="" id="inputDate" placeholder="Enter a date">
</div>
<div>
<label for="inputTime">Time</label>
<input type="time" class="" id="inputTime" placeholder="Enter a time">
</div>
<div>
<label for="inputNumber">Number</label>
<input type="number" class="" id="inputNumber" placeholder="Enter a number">
</div>
<div>
<label for="inputRange">Range</label>
<input type="range" class="" id="inputRange" placeholder="Enter a range">
</div>
<div>
<label for="inputColor">Color</label>
<input type="color" class="" id="inputColor" placeholder="Enter a color">
</div>
<div>
<label for="inputFile">File input</label>
<input type="file" class="" id="inputFile">
</div>
<div>
<label for="inputText">Disabled text</label>
<input type="text" class="" disabled id="inputText" placeholder="Disabled text">
</div>
<div>
<label for="inputSearch">Disabled search</label>
<input type="search" class="" disabled id="inputSearch" placeholder="Disabled search">
</div>
<div>
<label for="inputTel">Disabled telephone</label>
<input type="text" class="" disabled id="inputTel" placeholder="Disabled telephone">
</div>
<div>
<label for="inputURL">Disabled URL</label>
<input type="url" class="" disabled id="inputURL" placeholder="Disabled URL">
</div>
<div>
<label for="inputEmail">Disabled email address</label>
<input type="email" class="" disabled id="inputEmail" placeholder="Disabled email">
</div>
<div>
<label for="inputPassword">Disabled password</label>
<input type="password" class="" disabled id="inputPassword" placeholder="Disabled password">
</div>
<div>
<label for="inputDate">Disabled date</label>
<input type="date" class="" disabled id="inputDate" placeholder="Disabled date">
</div>
<div>
<label for="inputTime">Disabled time</label>
<input type="time" class="" disabled id="inputTime" placeholder="Disabled time">
</div>
<div>
<label for="inputNumber">Disabled number</label>
<input type="number" class="" disabled id="inputNumber" placeholder="Disabled number">
</div>
<div>
<label for="inputRange">Disabled range</label>
<input type="range" class="" disabled id="inputRange" placeholder="Disabled range">
</div>
<div>
<label for="inputColor">Disabled color</label>
<input type="color" class="" disabled id="inputColor" placeholder="Disabled color">
</div>
<div>
<label for="inputFile">Disabled file input</label>
<input type="file" class="" disabled id="inputFile">
</div>
<div class="kss-markup kss-style">
<pre class="prettyprint linenums lang-html"><code data-language="html"><div>
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
<label for="inputText">Text</label>
<input type="text" class="" id="inputText" placeholder="Enter some text">
</div>
<div>
<label for="inputSearch">Search</label>
<input type="search" class="" id="inputSearch" placeholder="Search">
</div>
<div>
<label for="inputTel">Telephone</label>
<input type="text" class="" id="inputTel" placeholder="Enter some text">
</div>
<div>
<label for="inputURL">URL</label>
<input type="url" class="" id="inputURL" placeholder="Enter a URL">
</div>
<div>
<label for="inputEmail">Email address</label>
<input type="email" class="" id="inputEmail" placeholder="Enter email">
</div>
<div>
<label for="inputPassword">Password</label>
<input type="password" class="" id="inputPassword" placeholder="Password">
</div>
<div>
<label for="inputDate">Date</label>
<input type="date" class="" id="inputDate" placeholder="Enter a date">
</div>
<div>
<label for="inputTime">Time</label>
<input type="time" class="" id="inputTime" placeholder="Enter a time">
</div>
<div>
<label for="inputNumber">Number</label>
<input type="number" class="" id="inputNumber" placeholder="Enter a number">
</div>
<div>
<label for="inputRange">Range</label>
<input type="range" class="" id="inputRange" placeholder="Enter a range">
</div>
<div>
<label for="inputColor">Color</label>
<input type="color" class="" id="inputColor" placeholder="Enter a color">
</div>
<div>
<label for="inputFile">File input</label>
<input type="file" class="" id="inputFile">
</div>
<div>
<label for="inputText">Disabled text</label>
<input type="text" class="" disabled id="inputText" placeholder="Disabled text">
</div>
<div>
<label for="inputSearch">Disabled search</label>
<input type="search" class="" disabled id="inputSearch" placeholder="Disabled search">
</div>
<div>
<label for="inputTel">Disabled telephone</label>
<input type="text" class="" disabled id="inputTel" placeholder="Disabled telephone">
</div>
<div>
<label for="inputURL">Disabled URL</label>
<input type="url" class="" disabled id="inputURL" placeholder="Disabled URL">
</div>
<div>
<label for="inputEmail">Disabled email address</label>
<input type="email" class="" disabled id="inputEmail" placeholder="Disabled email">
</div>
<div>
<label for="inputPassword">Disabled password</label>
<input type="password" class="" disabled id="inputPassword" placeholder="Disabled password">
</div>
<div>
<label for="inputDate">Disabled date</label>
<input type="date" class="" disabled id="inputDate" placeholder="Disabled date">
</div>
<div>
<label for="inputTime">Disabled time</label>
<input type="time" class="" disabled id="inputTime" placeholder="Disabled time">
</div>
<div>
<label for="inputNumber">Disabled number</label>
<input type="number" class="" disabled id="inputNumber" placeholder="Disabled number">
</div>
<div>
<label for="inputRange">Disabled range</label>
<input type="range" class="" disabled id="inputRange" placeholder="Disabled range">
</div>
<div>
<label for="inputColor">Disabled color</label>
<input type="color" class="" disabled id="inputColor" placeholder="Disabled color">
</div>
<div>
<label for="inputFile">Disabled file input</label>
<input type="file" class="" disabled id="inputFile">
</div>
</code></pre>
</div>
</section>
<section id="kssref-forms-base-input-checkbox" class="kss-section kss-section--depth-3">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-forms-base-input-checkbox">
<span class="kss-title__ref">
<span class="kss-title__permalink-hash">
forms.base.input-checkbox
</span>
</span>
Checkboxes
</a>
</h3>
<div class="kss-description">
<p>If an <code><input></code> element has the <code>type='checkbox'</code> attribute set, the form
field is displayed as a checkbox.</p>
<p>It's recommended that you don't attempt to style these elements. Firefox's
implementation doesn't respect <code>box-sizing</code>, <code>padding</code>, or <code>width</code>.</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example </div>
<div class="kss-modifier__example">
<div>
<label><input type="checkbox" class=""> Check me out</label>
</div>
<div>
<label><input type="checkbox" class="" value="" disabled> Option two is disabled</label>
</div>
<div class="kss-markup kss-style">
<pre class="prettyprint linenums lang-html"><code data-language="html"><div>
<label><input type="checkbox" class=""> Check me out</label>
</div>
<div>
<label><input type="checkbox" class="" value="" disabled> Option two is disabled</label>
</div>
</code></pre>
</div>
</section>
<section id="kssref-forms-base-input-radio" class="kss-section kss-section--depth-3">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-forms-base-input-radio">
<span class="kss-title__ref">
<span class="kss-title__permalink-hash">
forms.base.input-radio
</span>
</span>
Radio buttons
</a>
</h3>
<div class="kss-description">
<p>If an <code><input></code> element has the <code>type='radio'</code> attribute set, the form field
is displayed as a radio button.</p>
<p>It's recommended that you don't attempt to style these elements. Firefox's
implementation doesn't respect <code>box-sizing</code>, <code>padding</code>, or <code>width</code>.</p>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example </div>
<div class="kss-modifier__example">
<div>
<label><input type="radio" class="" value="option1" name="example-radio" checked> Option one</label>
</div>
<div>
<label><input type="radio" class="" value="option2" name="example-radio"> Option two</label>
</div>
<div>
<label><input type="radio" class="" value="option3" name="example-radio" disabled> Option three is disabled</label>
</div>
<div class="kss-markup kss-style">
<pre class="prettyprint linenums lang-html"><code data-language="html"><div>
<label><input type="radio" class="" value="option1" name="example-radio" checked> Option one</label>
</div>
<div>
<label><input type="radio" class="" value="option2" name="example-radio"> Option two</label>
</div>
<div>
<label><input type="radio" class="" value="option3" name="example-radio" disabled> Option three is disabled</label>
</div>
</code></pre>
</div>
</section>
<section id="kssref-forms-base-label" class="kss-section kss-section--depth-3">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-forms-base-label">
<span class="kss-title__ref">
<span class="kss-title__permalink-hash">
forms.base.label
</span>
</span>
Labels
</a>
</h3>
<div class="kss-description">
<p>The <code><label></code> element represents a caption of a form field. The label can be
associated with a specific form control by using the <code>for</code> attribute or by
putting the form control inside the label element itself.</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example </div>
<div class="kss-modifier__example">
<div>
<label class="" for="lableInputText">A label for a text input</label>
<input type="text" id="lableInputText" placeholder="Enter some text">
</div>
<div>
<label class=""><input type="checkbox"> A label wrapped around a checkbox</label>
</div>
<div class="kss-markup kss-style">
<pre class="prettyprint linenums lang-html"><code data-language="html"><div>
<label class="" for="lableInputText">A label for a text input</label>
<input type="text" id="lableInputText" placeholder="Enter some text">
</div>
<div>
<label class=""><input type="checkbox"> A label wrapped around a checkbox</label>
</div>
</code></pre>
</div>
</section>
<section id="kssref-forms-base-select" class="kss-section kss-section--depth-3">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-forms-base-select">
<span class="kss-title__ref">
<span class="kss-title__permalink-hash">
forms.base.select
</span>
</span>
Select list
</a>
</h3>
<div class="kss-description">
<p>The <code><select></code> element represents a form field for selecting amongst a set of
options.</p>
<p>Known limitation: by default, Chrome and Safari on OS X allow very limited
styling of <code><select></code>, unless a <code>border</code> property is set.</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example </div>
<div class="kss-modifier__example">
<div>
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
<label for="selectDropdown">A standard drop-down</label>
<select class="" id="selectDropdown">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<optgroup label="More options">
<option>Option 4</option>
<option>Option 5</option>
</optgroup>
</select>
</div>
<div>
<label for="selectMultiItem">A multi-item select field</label>
<select class="" id="selectMultiItem" multiple>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<optgroup label="More options">
<option>Option 4</option>
<option>Option 5</option>
</optgroup>
</select>
</div>
<div>
<label for="selectDisabled">A disabled drop-down</label>
<select class="" id="selectDisabled" disabled>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<optgroup label="More options">
<option>Option 4</option>
<option>Option 5</option>
</optgroup>
</select>
</div>
<div class="kss-markup kss-style">
<pre class="prettyprint linenums lang-html"><code data-language="html"><div>
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<label for="selectDropdown">A standard drop-down</label>
<select class="" id="selectDropdown">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<optgroup label="More options">
<option>Option 4</option>
<option>Option 5</option>
</optgroup>
</select>
</div>
<div>
<label for="selectMultiItem">A multi-item select field</label>
<select class="" id="selectMultiItem" multiple>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<optgroup label="More options">
<option>Option 4</option>
<option>Option 5</option>
</optgroup>
</select>
</div>