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.

            
              <h1>Controls and Widgets</h1>

<h2>Native Controls</h2>

<form>
  <table>
    <caption>Standard HTML</caption>
    <tr>
      <th>Author</th>
      <th>Title</th>
      <th>Year</th>
    </tr>
    <tr>
      <td>Miguel De Cervantes</td>
      <td>The Ingenious Gentleman Don Quixote of La Mancha</td>
      <td>1605</td>
    </tr>
    <tr>
      <td>Mary Shelley</td>
      <td>Frankenstein; or, The Modern Prometheus</td>
      <td>1818</td>
    </tr>
    <tr>
      <td>Herman Melville</td>
      <td>Moby-Dick; or, The Whale</td>
      <td>1851</td>
    </tr>
    <tr>
      <td>Emma Dorothy Eliza Nevitte Southworth</td>
      <td>The Hidden Hand</td>
      <td>1888</td>
    </tr>
    <tr>
      <td>F. Scott Fitzgerald</td>
      <td>The Great Gatsby</td>
      <td>1925</td>
    </tr>
    <tr>
      <td>George Orwell</td>
      <td>Nineteen Eighty-Four</td>
      <td>1948</td>
    </tr>
  </table>
  
  <div>
    <button type="button">Commit</button>
  </div>

  <div>
    <label for="range">Choose a Number:</label>
    <input type="range" id="range" min="0" max="42" value="28" step="7" list="ticks">
    <datalist id="ticks">
      <option value="0" label="0"></option>
      <option value="7"></option>
      <option value="14"></option>
      <option value="21"></option>
      <option value="28"></option>
      <option value="35"></option>
      <option value="42" label="42"></option>
    </datalist>
  </div>

  <div>
    <label for="berries">Berries in the Fridge:</label>
    <input id="berries" type="text" list="berrylist" value="">
    <datalist id="berrylist">
        <option value="Blackberry">
        <option value="Blueberry">
        <option value="Boysenberry">
        <option value="Chuckberry">
        <option value="Cloudberry">
        <option value="Cranberry">
        <option value="Dewberry">
        <option value="Elderberry">
        <option value="Gooseberry">
        <option value="Huckleberry, I’ll be your">
        <option value="Lingonberry">
        <option value="Loganberry">
        <option value="Marionberry">
        <option value="Mulberry">
        <option value="Raspberry">
        <option value="Snozzberry">
        <option value="Strawberry">
        <option value="Thimbleberry">
        <option value="Wolfberry">
        <option value="Youngberry">
      </datalist>
  </div>

  <div>
    <label for="country">Choose a Specific Country:</label>
    <select name="country" id="country">
      <optgroup label="United Kingdom">
        <option value="England">England</option>
        <option value="Scotland">Scotland</option>
        <option value="Wales">Wales</option>
      </optgroup>
      <optgroup label="North America">
        <option value="Canada">Canada</option>
        <option value="USA">United States of America</option>
      </optgroup>
    </select>
  </div>

  <fieldset>
    <legend>Would you like to hear from us?</legend>
    <div>
      <input type="radio" name="spam" id="spamY" value="me" checked>
      <label for="spamY">Please send me all the spam.</label>
    </div>
    <div>
      <input type="radio" name="spam" id="spamN" value="neighbor">
      <label for="spamN">Please send it to my neighbor.</label>
    </div>
  </fieldset>

  <div>
    <details>
      <summary>Disclosure control (native)</summary>
      <p>
        The disclosure widget built-in to HTML5 but not supported in some browsers, including those used by SR users.
      </p>
    </details>
  </div>
</form>

<h2>Complex Widgets</h2>

<form>
  <div>
    <button type="button" id="btnMSb" aria-expanded="false" onclick="toggle(this.id,'#disclosed');" aria-labelledby="disclosure">
      <svg xmlns="\http://www.w3.org/2000/svg&quot;" viewBox="0 0 80 80" focusable="false"><path d="M70.3 13.8L40 66.3 9.7 13.8z"></path></svg>
    </button>
    <span id="disclosure">ARIA Disclosure Widget</span>
    <p class="hidden" id="disclosed">
      This uses native controls enhanced with ARIA and JavaScript.
    </p>
  </div>
  
  <div>
    <div role="tablist" aria-label="Entertainment">
      <ul role="presentation">
        <li role="presentation"><a href="#Panel1" role="tab" aria-selected="true" aria-controls="Panel1" id="Tab1" onclick="tabble(this.id,'Panel1');return false;">Panel 1</a></li>
        <li role="presentation"><a href="#Panel2" role="tab" aria-selected="false" aria-controls="Panel2" id="Tab2" onclick="tabble(this.id,'Panel2');return false;">Panel 2</a></li>
        <li role="presentation"><a href="#Panel3" role="tab" aria-selected="false" aria-controls="Panel3" id="Tab3" onclick="tabble(this.id,'Panel3');return false;">Panel 3</a></li>
      </ul>
    </div>
    <div tabindex="0" role="tabpanel" id="Panel1" aria-labelledby="Tab1" class="shown">
      <p>Native links and generic containers, enhanced with ARIA and JavaScript. I did not add arrow key support, but I do put focus into the panel when a tab is chosen.</p>
    </div>
    <div tabindex="0" role="tabpanel" id="Panel2" aria-labelledby="Tab2" class="hidden">
      <p>You have found the second tab. Cool.</p>
    </div>
    <div tabindex="0" role="tabpanel" id="Panel3" aria-labelledby="Tab3" class="hidden">
      <p>You have found the third tab. Cool.</p>
    </div>
  </div>
</form>

<!--
<h2>Bonus: Nested Interactive Controls</h2>

<form>
  <div tabindex="0">
    <button type="button">Commit</button>
  </div>
  
  <div>
    <a href="http://example.com/foo">Visit our handy link, 
      <span tabindex="0">which has a random tab stop</span>.
    </a>
  </div>
  
  <div tabindex="0" role="button">
    This is a non-standard button which also contains
    <a href="http://example.com/bar">a reference to somewhere else as a link</a> because this is a thing.
  </div>
  
  <div class="card">
    <p>
    <a href="http://example.com/foobar">Card Title</a>
    </p>
    <p>
      Text within the card that also has <a href="http://example.com/baz">a link</a> somewhere within it, which is not nested in the DOM but is nested in the layout.
    </p>
  </div>
</form>
-->
            
          
!
            
              body {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  line-height: 1.4;
  color: #333;
  background-color: #eee;
}

pre {
  white-space: pre-wrap;
  padding: .5em 1em;
  border: .1em solid #ccc;
  background-color: rgba(0,0,0,.1);
  color: #000;
}

pre, code {
  font-family: 'Lucida Console', Monaco, monospace;
  font-size: 80%;
}

code {
  color: #030;
}

h2, h3 {
  margin-top: 4rem;
}

form {
  background-color: #eee;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, [col] 1fr);
  grid-column-gap: 1em;
  grid-row-gap: 1em;
}

form > * {
  align-self: start;
  background-color: #fff;
  padding: .5em 1em;
  box-shadow: .25em .25em .5em rgba(0,0,0,.15);
}

fieldset {
  padding: 0 1em;
  margin: 0 0.5em 1em 0.5em;
}

form details div {
  display: inline-block;
  margin: 0.25em;
}

details {
/*   margin: 1em 0; */
}

summary {
  margin-bottom: 1em;
}

form div {
  box-sizing: border-box;
  margin: 1em 0;
}

label {
  display: block;
  margin: 0.25em 0;
}

fieldset label {
  display: inline;
}

button,
input, summary, select {
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  border: 0.1em solid;
  padding: 0 0.2em;
}

button:focus, button:hover,
input:focus, summary:focus, select:focus {
  outline: 0.15em solid #00f;
  box-shadow: 0 0 0.2em #00f;
}

button {
  color: #eee;
  background-color: #333;
  padding: .5em 1em;
}

button:focus, button:hover {
  color: #333;
  background-color: #eee;
}

details {
  margin: 1em 0;
}

summary {
  margin-bottom: 1em;
}

table {
  margin: 1em 0;
  border-collapse: collapse;
  grid-column-start: 1;
  grid-column-end: 3;
}

caption {
  text-align: left;
  font-style: italic;
  padding: 0.25em 0.5em 0.5em 0.5em;
}

th,
td {
  padding: 0.25em 0.5em 0.25em 1em;
  vertical-align: text-top;
  text-align: left;
  text-indent: -0.5em;
}

th {
  vertical-align: bottom;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-weight: bold;
}

td:nth-of-type(2) {
  font-style: italic;
}

th:nth-of-type(3),
td:nth-of-type(3) {
  text-align: right;
}

.shown {
  display: block;
}

.hidden {
  display: none;
}

button[aria-expanded] {
  font-size: 60%;
  color: #000;
  background-color: #00f;
  padding: 0.3em 0.2em 0 0.2em;
  border: 0.2em solid #00f;
  border-radius: 50%;
  line-height: 1;
  text-align: center;
  text-indent: 0;
  transform: rotate(270deg);
}

button[aria-expanded] svg {
  width: 1.25em;
  height: 1.25em;
  fill: #fff;
  transition: transform 0.25s ease-in;
  transform-origin: center 45%;
}

button[aria-expanded]:hover,
button[aria-expanded]:focus {
  background-color: #fff;
  outline: none;
}

button[aria-expanded]:hover svg,
button[aria-expanded]:focus svg {
  fill: #00f;
}

/* Lean on programmatic state for styling */
button[aria-expanded="true"] svg {
  transform: rotate(90deg);
}

[role=tabpanel] {
  border: .1em solid #ccc;
  padding: 0 1em;
}

ul[role=presentation] {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

[role=tablist] a {
  display: block;
  border: .1em solid #ccc;
  background-color: #fff;
  border-radius: .5em .5em 0 0;
  padding: .5em 1em;
  margin: 0 .25em;
  text-align: center;
  text-decoration: none;
  outline: none;
}

[role=tablist] a:focus, [role=tablist] a:hover {
  background-color: #333;
  color: #eee;
  border-color: #333;
}

[role=tablist] a[aria-selected=true] {
  border-bottom-color: #fff;
}

[role=tablist], [role=tabpanel] {
  margin: 0;
}

[role=tabpanel] {
  margin-top: -.1em;
}

[role=tab][aria-selected=true] {
  box-shadow: 0 .3em 0 #ccc inset;
}

.card {
  position: relative;
}

.card p:first-child a[href]::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

[role=button] {
  cursor: default;
}

[role=button]:focus, [role=button]:hover, [tabindex]:focus, [tabindex]:hover {
  outline: 0.15em solid #00f;
  box-shadow: 0 0 0.2em #00f;
}

            
          
!
            
              function toggle(btnID, eIDs) {
  // Feed the list of ids as a selector
  var theElms = document.querySelectorAll(eIDs);
  // Get the button that triggered this
  var theButton = document.getElementById(btnID);
  // If the button is not expanded...
  if (theButton.getAttribute("aria-expanded") == "false") {
    // Loop through the rows and show them
    for (var i = 0; i < theElms.length; i++) {
      theElms[i].classList.add("shown");
      theElms[i].classList.remove("hidden");
    }
    // Now set the button to expanded
    theButton.setAttribute("aria-expanded", "true");
  // Otherwise button is not expanded...
  } else {
    // Loop through the rows and hide them
    for (var i = 0; i < theElms.length; i++) {
      theElms[i].classList.add("hidden");
      theElms[i].classList.remove("shown");
    }
    // Now set the button to collapsed
    theButton.setAttribute("aria-expanded", "false");
  }
}

function tabble(tabID, panelID) {
  // Feed the panel id as a selector
  var thePanel = document.getElementById(panelID);
  // Get the button that triggered this
  var theTab = document.getElementById(tabID);
  // Get all tabs
  var allTabs = document.querySelectorAll("[role=tab]");
  // Loop through the tabs and hide them
  for (var i = 0; i < allTabs.length; i++) {
    allTabs[i].setAttribute('aria-selected','false');
  }
  // Now select the chosen tab
  theTab.setAttribute('aria-selected','true');
  // Get all tab panels
  var allPanels = document.querySelectorAll("[role=tabpanel]");
  // Loop through the tab panels and hide them
  for (var i = 0; i < allPanels.length; i++) {
    allPanels[i].classList.add("hidden");
    allPanels[i].classList.remove("shown");
  }
  // Now show the chosen panel
  thePanel.classList.add("shown");
  thePanel.classList.remove("hidden");
  // Now focus the chosen panel
  thePanel.focus();
}
            
          
!
999px
🕑 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.

Console