Fixed #853

public/themes/arya-blue/theme.css

@@ -358,7 +358,7 @@
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #ef9a9a;
 }
 

public/themes/arya-green/theme.css

@@ -358,7 +358,7 @@
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #ef9a9a;
 }
 

public/themes/arya-orange/theme.css

@@ -358,7 +358,7 @@
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #ef9a9a;
 }
 

public/themes/arya-purple/theme.css

@@ -358,7 +358,7 @@
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #ef9a9a;
 }
 

public/themes/bootstrap4-dark-blue/theme.css

@@ -358,7 +358,7 @@
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #f19ea6;
 }
 

public/themes/bootstrap4-dark-purple/theme.css

@@ -358,7 +358,7 @@
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #f19ea6;
 }
 

public/themes/bootstrap4-light-blue/theme.css

@@ -358,7 +358,7 @@
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #dc3545;
 }
 

public/themes/bootstrap4-light-purple/theme.css

@@ -358,7 +358,7 @@
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #dc3545;
 }
 

public/themes/fluent-light/theme.css

@@ -358,7 +358,7 @@
   border-top-right-radius: 2px;
   border-bottom-right-radius: 2px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #a4252c;
 }
 

public/themes/luna-amber/theme.css

@@ -358,7 +358,7 @@
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #e57373;
 }
 

public/themes/luna-blue/theme.css

@@ -358,7 +358,7 @@
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #e57373;
 }
 

public/themes/luna-green/theme.css

@@ -358,7 +358,7 @@
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #e57373;
 }
 

public/themes/luna-pink/theme.css

@@ -358,7 +358,7 @@
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #e57373;
 }
 

public/themes/md-dark-deeppurple/theme.css

@@ -382,7 +382,7 @@
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #f44435;
 }
 
@@ -5096,6 +5096,21 @@
   background-image: none;
   background: transparent;
 }
+.p-input-filled .p-cascadeselect.p-invalid {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+.p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled):hover {
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+.p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+
+.p-cascadeselect.p-invalid:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+}
 
 .p-checkbox {
   border-radius: 50%;

public/themes/md-dark-indigo/theme.css

@@ -382,7 +382,7 @@
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #f44435;
 }
 
@@ -5096,6 +5096,21 @@
   background-image: none;
   background: transparent;
 }
+.p-input-filled .p-cascadeselect.p-invalid {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+.p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled):hover {
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+.p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+
+.p-cascadeselect.p-invalid:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+}
 
 .p-checkbox {
   border-radius: 50%;

public/themes/md-light-deeppurple/theme.css

@@ -382,7 +382,7 @@
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #B00020;
 }
 
@@ -5096,6 +5096,21 @@
   background-image: none;
   background: transparent;
 }
+.p-input-filled .p-cascadeselect.p-invalid {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+.p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled):hover {
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+.p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+
+.p-cascadeselect.p-invalid:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020;
+}
 
 .p-checkbox {
   border-radius: 50%;

public/themes/md-light-indigo/theme.css

@@ -382,7 +382,7 @@
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #B00020;
 }
 
@@ -5096,6 +5096,21 @@
   background-image: none;
   background: transparent;
 }
+.p-input-filled .p-cascadeselect.p-invalid {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+.p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled):hover {
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+.p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+
+.p-cascadeselect.p-invalid:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020;
+}
 
 .p-checkbox {
   border-radius: 50%;

public/themes/mdc-dark-deeppurple/theme.css

@@ -382,7 +382,7 @@
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #f44435;
 }
 
@@ -5096,6 +5096,21 @@
   background-image: none;
   background: transparent;
 }
+.p-input-filled .p-cascadeselect.p-invalid {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+.p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled):hover {
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+.p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+
+.p-cascadeselect.p-invalid:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+}
 
 .p-checkbox {
   border-radius: 50%;

public/themes/mdc-dark-indigo/theme.css

@@ -382,7 +382,7 @@
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #f44435;
 }
 
@@ -5096,6 +5096,21 @@
   background-image: none;
   background: transparent;
 }
+.p-input-filled .p-cascadeselect.p-invalid {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+.p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled):hover {
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+.p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+
+.p-cascadeselect.p-invalid:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+}
 
 .p-checkbox {
   border-radius: 50%;

public/themes/mdc-light-deeppurple/theme.css

@@ -382,7 +382,7 @@
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #B00020;
 }
 
@@ -5096,6 +5096,21 @@
   background-image: none;
   background: transparent;
 }
+.p-input-filled .p-cascadeselect.p-invalid {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+.p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled):hover {
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+.p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+
+.p-cascadeselect.p-invalid:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020;
+}
 
 .p-checkbox {
   border-radius: 50%;

public/themes/mdc-light-indigo/theme.css

@@ -382,7 +382,7 @@
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #B00020;
 }
 
@@ -5096,6 +5096,21 @@
   background-image: none;
   background: transparent;
 }
+.p-input-filled .p-cascadeselect.p-invalid {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+.p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled):hover {
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+.p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+
+.p-cascadeselect.p-invalid:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020;
+}
 
 .p-checkbox {
   border-radius: 50%;

public/themes/nova-accent/theme.css

@@ -358,7 +358,7 @@
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #a80000;
 }
 

public/themes/nova-alt/theme.css

@@ -358,7 +358,7 @@
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #a80000;
 }
 

public/themes/nova-vue/theme.css

@@ -358,7 +358,7 @@
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #a80000;
 }
 

public/themes/nova/theme.css

@@ -358,7 +358,7 @@
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #a80000;
 }
 

public/themes/rhea/theme.css

@@ -358,7 +358,7 @@
   border-top-right-radius: 2px;
   border-bottom-right-radius: 2px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #e7a3a3;
 }
 

public/themes/saga-blue/theme.css

@@ -358,7 +358,7 @@
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #f44336;
 }
 

public/themes/saga-green/theme.css

@@ -358,7 +358,7 @@
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #f44336;
 }
 

public/themes/saga-orange/theme.css

@@ -358,7 +358,7 @@
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #f44336;
 }
 

public/themes/saga-purple/theme.css

@@ -358,7 +358,7 @@
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #f44336;
 }
 

public/themes/vela-blue/theme.css

@@ -358,7 +358,7 @@
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #ef9a9a;
 }
 

public/themes/vela-green/theme.css

@@ -358,7 +358,7 @@
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #ef9a9a;
 }
 

public/themes/vela-orange/theme.css

@@ -358,7 +358,7 @@
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #ef9a9a;
 }
 

public/themes/vela-purple/theme.css

@@ -358,7 +358,7 @@
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-cascadeselect.p-invalid {
+.p-cascadeselect.p-invalid.p-component {
   border-color: #ef9a9a;
 }
 

src/views/cascadeselect/CascadeSelectDemo.vue

@@ -11,7 +11,7 @@
         <div class="content-section implementation">
             <div class="card">
                 <h5>Basic</h5>
-                <CascadeSelect v-model="selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name" 
+                <CascadeSelect v-model="selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name" class="p-invalid"
                         :optionGroupChildren="['states', 'cities']" style="minWidth: 14rem" placeholder="Select a City" />
 
                 <h5>Templating</h5>