Skip to content

Instantly share code, notes, and snippets.

/index.html

Created October 19, 2016 16:51
Show Gist options
  • Save anonymous/b930f93b8be560b3d34b59afdeae0aa5 to your computer and use it in GitHub Desktop.
Save anonymous/b930f93b8be560b3d34b59afdeae0aa5 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/yopofej
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
input.broken {
/* border: 2px solid; */
/* border-width: 2px; */
/* border-style: solid; */
/* border-color: blue; */
border-radius: 4px;
/* background: lightgray; */
/* Fixes tried: */
/* outline: inherit; */
/* outline: initial; */
/* outline: unset; */
/* -moz-appearance: textfield; */
/* appearance: textfield; */
}
/* Workaround, opt-in to your own specified outline style
* without overriding other browsers’ default :focus styles:
*/
/*
input.broken:-moz-focusring {
outline: 2px solid rgb( 180, 222, 250 );
outline: 2px solid -moz-mac-focusring;
-moz-outline-radius: 6px;
outline-radius: 6px;
}
*/
</style>
</head>
<body>
<form>
<label>Default: <input type="text"></label>
<label>Broken: <input type="text" class="broken"></label>
</form>
<p>Using one or more of these properties will disable the default <code>:focus</code> outline in Firefox:</p>
<ul>
<li>border</li>
<li>border-width</li>
<li>border-style</li>
<li>border-color</li>
<li>border-radius</li>
<li>background</li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment