HTML5 Input Types View source

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 input[type="text"].

Note: You must use interpolation with the variable—#{}.

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

CSS Output

{% 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 %}