Contents

<section id="html5-input-types">
  <h2>HTML5 Input Types <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_html5-input-types.scss">View source</a></h2>
  <p>This addon generates a variable which contains a list of all html5 input types that render as text-based inputs, excluding textarea. In other words, it allows for easy targeting of all inputs that mimic <code>input[type="text"]</code>.</p>
  <p>Note: You must use interpolation with the variable&mdash;<code>#{}</code>.</p>

{% highlight scss %}
#{$all-text-inputs} {
  border: 1px solid green;
}
{% endhighlight %}

<h3>CSS Output</h3>
{% highlight scss %}
input[type="email"], input[type="number"],   input[type="password"], input[type="search"],
input[type="tel"],   input[type="text"],     input[type="url"],      input[type="color"],
input[type="date"],  input[type="datetime"], input[type="datetime-local"],
input[type="month"], input[type="time"],     input[type="week"] {
  border: 1px solid green;
}
{% endhighlight %}

</section>

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
bourbon-2.1.0	_includes/html5-input-types.html