diff --git a/packages/ui-text-area/src/TextArea/styles.js b/packages/ui-text-area/src/TextArea/styles.js
index <HASH>..<HASH> 100644
--- a/packages/ui-text-area/src/TextArea/styles.js
+++ b/packages/ui-text-area/src/TextArea/styles.js
@@ -77,14 +77,11 @@ const generateStyle = (theme, themeOverride, props, state) => {
       wordWrap: 'break-word',
       textAlign: 'start',
       ...fontSizeVariants[size],
-      '&:focus + span': {
+      '&:focus + [class$=-textArea__outline]': {
         transform: 'scale(1)',
         opacity: 1
       },
-      '&[aria-invalid]': {
-        borderColor: componentTheme.errorBorderColor
-      },
-      '&[aria-invalid]:focus, &[aria-invalid]:focus + span': {
+      '&[aria-invalid], &[aria-invalid]:focus, &[aria-invalid]:focus + [class$=-textArea__outline]': {
         borderColor: componentTheme.errorBorderColor
       },
       '&::placeholder': {
refactor: make CSS selectors more specific