Pen Settings

HTML

CSS

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

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <html>

<head>
</head>

<body>
  <div class="row">
    <div class="large-12 columns">
      <h1>Hacking the focus outline</h1>
    </div>
  </div>

  <div class="row">
    <div class="large-12 columns">

      <h3>Removing outlines for mouse users only</h3>

      <p class="lead">
        This should only be done when Art Directors have failed to come up with a focus style they can live with in both scenarios.
        On mousedown we set the class <code>.no-focus</code> to the body element. On keydown we remove it. Then you can use this in CSS like so: <code>.no-focus a { outline:none; }</code>. Beware that this can have performace (repaint) issues and also accessibility issues. Make shure you read <a href="http://a11yproject.com/posts/never-remove-css-outlines/">Quick Tip: Never remove CSS outlines</a> before doing this. Dom events based on <a href="https://github.com/lindsayevans/outline.js">outline.js</a>.
      </p>


      <h4>Test</h4>
      <p>
        Lorem ipsum dölör sit. Amet consectetur ådipisicing elit sed do eiusmod. Tempör incididunt ut låbore et dölöre magnå åliqua. Rhöncus neque duis. Törtör felis törtör. Gråvidä ärcu eleifend curåbitur. Erös å condimentum vulputäte. Quis risus plåcerat. Eros
        löbortis sem <a href="#">consequät arcu</a>. Eros åccumsån vel integer. Sed ät dictum euismöd cöngue åugue. Säpien örci pröin låcinia måuris malesuädå. Orci måttis felis egestäs nisi, möllis äc pretium.
      </p>
      <p>
        Lorem ipsum <a href="#">test link</a>
      </p>

      <div class="button-group">
        <a href="#" class="secondary button">View</a>
        <a href="#" class="success button">Edit</a>
        <a href="#" class="warning button">Share</a>
        <a href="#" class="alert button">Delete</a>
      </div>
      <p>
        Tempor phåretrå scelerisque lorem sit accumsån. Hac congue ipsum åliquam tincidunt iaculis, sem laciniä. Aliquåm tortor diäm libero volutpat pellentesque, hac feugiåt. Vitäe sollicitudin elit facilisis mörbi gråvidå. Ac scelerisque bibendum söllicitudin
        massä blåndit. Ullåmcorper in ärcu håc. Tortör iäculis ämet consectetur praesent cöngue. Aeneån plåcerät urnå vel, eråt fusce duis dui. Södales scelerisque tincidunt åugue placerat nibh. Nec nibh blåndit dönec sit tincidunt, vulputate läciniå.
        Suspendisse semper cönsequåt cursus fåcilisis augue, äeneån semper. Orci semper eråt diåm völutpat quisque, neque integer. Dolor lörem aeneän egestäs sollicitudin ådipiscing. Mäecenås pörtå curabitur ac imperdiet duis måsså. Gråvidä bibendum åugue
        rhöncus velit. Augue rhöncus årcu ultricies euismod, sed tempus congue.
      </p>
      <p>
        Ullåmcörper curäbitur sapien. A ät gråvidå. A åccumsån facilisis nön måsså däpibus, viverrå sollicitudin. Nullåm proin eleifend måsså. Cönsequat vestibulum plåceråt pösuere quåm läciniå. Accumsan justö curåbitur. Purus aliquam söllicitudin velit håc.
        Nibh leo tortör. Aliquam mörbi tempus. Urnå håc mäecenås. Nullam dolor blandit målesuådå södåles fusce ac. Quis näm å. Måecenås dictum venenåtis vestibulum liberö tellus egestås dolor. Mågna årcu elementum. Id eleifend ullamcorper mättis, curåbitur
        imperdiet liberö. Fermentum vulputåte fåcilisis non imperdiet. Quis eleifend leo.
      </p>
      <p>Lörem ipsum <a href="#">another test link</a></p>
      <button>Click me too</button>

    </div>
  </div>
</body>

</html>
              
            
!

CSS

              
                
a, button {
   &:focus {
     outline: 2px solid #000;
     outline-offset: 1px;
   }
   
 }

 .no-focus {
   a, button {
      outline: none;
   } 
 }
              
            
!

JS

              
                (function(doc) {
  var dom_events = 'addEventListener' in doc,
		e = doc.getElementsByTagName("body")[0],
		_add_event_listener = function(type, callback) {
			// Basic cross-browser event handling
			if (dom_events) {
				doc.addEventListener(type, callback);
			} else {
				doc.attachEvent('on' + type, callback);
			}
		},
		_set_class = function(add) {
			if (add && ! e.classList.contains('no-focus')) {
				e.classList.add('no-focus');
			} else if (!add)    {
				e.classList.remove('no-focus');
			}
		};

	_add_event_listener('mousedown', function() {
		_set_class(true);
	});

	_add_event_listener('keydown', function() {
		_set_class(false);
	});

})(document);
              
            
!
999px

Console