Generated by SassMeister.com.

SassMeister-input-HTML.html

<h1>BoxShadow vs. Borders</h1>
<p>Try it out by clicking on the inputs below:</p>
<div style="width: 200px; float: left">
  <input class="boxShadow" placeholder="These Inputs work" />
  <input class="boxShadow" placeholder="nicely with" />
  <input class="boxShadow" placeholder="animated Borders" />
  <input type="submit" value="Submit" />
</div>
<div style="width: 200px; float: left">
  <input class="border" placeholder="While these ones" />
  <input class="border" placeholder="shift around stuff" />
  <input class="border" placeholder="when they're clicked" />
  <input type="submit" value="Submit" />
</div>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

input {
  display: block; 
  margin-bottom: 10px;
}

// easy
input.boxShadow {
  border: none;
  box-shadow: 0 1px 0 #999;
  transition: box-shadow 0.2s;
  
  &:focus {
    box-shadow: 0 4px 0 green;
  }
}

// complicated
input.border {
  border: none;
  border-bottom: 1px solid #999;
  transition: border-bottom 0.2s;
  
  &:focus {
    border-bottom: 4px solid red;
  }
}

SassMeister-output.css

input {
  display: block;
  margin-bottom: 10px;
}

input.boxShadow {
  border: none;
  box-shadow: 0 1px 0 #999;
  transition: box-shadow 0.2s;
}

input.boxShadow:focus {
  box-shadow: 0 4px 0 green;
}

input.border {
  border: none;
  border-bottom: 1px solid #999;
  transition: border-bottom 0.2s;
}

input.border:focus {
  border-bottom: 4px solid red;
}

SassMeister-rendered.html

<h1>BoxShadow vs. Borders</h1>
<p>Try it out by clicking on the inputs below:</p>
<div style="width: 200px; float: left">
  <input class="boxShadow" placeholder="These Inputs work" />
  <input class="boxShadow" placeholder="nicely with" />
  <input class="boxShadow" placeholder="animated Borders" />
  <input type="submit" value="Submit" />
</div>
<div style="width: 200px; float: left">
  <input class="border" placeholder="While these ones" />
  <input class="border" placeholder="shift around stuff" />
  <input class="border" placeholder="when they're clicked" />
  <input type="submit" value="Submit" />
</div>