How to style Vue Formulate input errors?

Question

I write a website with Vue.js and to handle user interface, I want to use Vue Formulate. All in all it works, but I have trouble to style input errors. So, I tried to make a very simple example to change the background color from the error list, but it doesn't work.

That is my easy component:

<template>
  <div>
    <p>Test for VueFormulate</p>
    <FormulateInput
      type="text"
      validation="required"
    />
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

<style scoped>
  li.formulate-input-error {
    background-color:green;
  }
</style>

After the site is loaded and the error list element is there, I can change the background-color in the Google Chrome devtools. But not bevor.

I hope somebody can explain what I have to do to make it work.

Answer 1

Your style block is scoped meaning you cannot style elements that are not in your immediate <template> (that's the point of scoping). You have three options:

1. Remove the scoped portion of your <style> block. I don't really recommend this.
2. Move your general form styles to a global css file. I would recommend this if you use more than 1 input.
3. Use a deep selector like ::v-deep. This is great for case-by-case overrides, and allows you to select elements that are deeper than your current "scope". Here's an example:

<style scoped>
.formulate-input::v-deep li.formulate-input-error {
  background-color: green;
}
</style>