diff --git a/docs/product/components/inputs.html b/docs/product/components/inputs.html index ec62edfafe..f1d45f4e23 100644 --- a/docs/product/components/inputs.html +++ b/docs/product/components/inputs.html @@ -333,3 +333,42 @@ + +
+ + {% header "h2", "Nested inputs" %} +

An input can be nested within a container that has the .s-input class applied to display styled elements as if they're within an input.

+ +
+{% highlight html %} +
+ +
+ + + svelte + + + + +
+
+{% endhighlight %} +
+ +
+ + + svelte + + + + +
+
+
+
diff --git a/lib/components/input_textarea/input_textarea.less b/lib/components/input_textarea/input_textarea.less index 4416ae183c..5e0673e730 100644 --- a/lib/components/input_textarea/input_textarea.less +++ b/lib/components/input_textarea/input_textarea.less @@ -102,7 +102,9 @@ } // INTERACTION - &:focus { + // Note: We're applying the focus styles both on `:focus` and `:focus-within` since this component can sometimes be used on the parent of an input such as in our tag selector in Core. + &:focus, + &:focus-within { .focus-styles(); }