<!-- :default -->
<section class="example-cntr default">
<h1>CSS <code>:default</code> pseudo-class</h1>
<p>The <code>:default</code> pseudo-class will target the default element in a form in a group of similar elements. </p>
<p>In case you need to target the default button in a form that does not have a class, you can use the <code>:default</code> pseudo-class.</p>
<form>
<label>Name:
<input type="text" id="name">
</label>
<a href="#">Cancel</a>
<button type="reset">Reset</button>
<button type="submit">Register</button>
<small>I used a "Reset" button for demostration purposes only.</small>
</form>
<hr>
<h3>Note</h3>
<p>"Reset" or "Clear" buttons in forms have serious usability issues. Avoid using them unless is strictly necessary. Here are some notes about why not to use them:</p>
<ul>
<li><a href="https://www.nngroup.com/articles/reset-and-cancel-buttons/" target="_blank" title="Link opens in a new tab">Reset and Cancel Buttons</a> - Nielsen Norman Group (2000)</li>
<li><a href="http://uxmovement.com/forms/killing-the-cancel-button-on-forms-for-good/" target="_blank" title="Link opens in a new tab">Killing the Cancel Button on Forms for Good</a> - UX Movement (2010)</li>
</ul>
</section>
//Colors
$r: #c03;
$g: #429032;
$b: #2963BD;
$y: #c90;
//Target the default action on the form
:default {
padding: 5px 35px;
color: white;
background: $g;
}
:default:hover {
background: darken($g,20);
}
//Styling stuff not needed for demo
body { text-align: left; }
.example-cntr {
max-width: 800px;
margin: auto;
padding: 20px 50px;
box-shadow: 0 1px 2px rgba(black,.3);
background: rgba(black,.15);
}
h1 {
text-transform: none;
border-bottom: #636363 1px dotted;
code {
display: inline-block;
margin-bottom: 10px;
color: $y;
background: none;
box-shadow: none;
}
}
code { font-size: 1em; }
form {
width: 400px;
margin: 40px auto;
padding: 20px;
border-radius: 2px;
text-align: right;
font-size: 22px;
background: rgba(black,.2);
small {
display: block;
margin-top: 30px;
font-size: 12px;
text-align: center;
color: #999;
}
}
label {
display: block;
margin-bottom: 20px;
text-align: left;
cursor: pointer;
}
input {
width: 100%;
margin-top: 5px;
padding: 5px;
font-size: 1em;
}
button {
padding: 5px 20px;
margin-left: 20px;
font:bold 1em 'Source Sans Pro', Arial, Helvetica, sans-serif;
border: 3px solid rgba(black,.5);
border-radius: 2px;
cursor: pointer;
transition: .3s;
&:hover {
background: #999;
}
}
Also see: Tab Triggers