How to target css style of the submit button with vue-formulate

477 views Asked by At

I have a border hover effect on the wrapper around labels and input fields. How can I remove/override the wrapper border and hover effect for the submit type? I'm using tailwind, but I'm mostly having issues targeting the correct class.

Here's my CSS

<style>
.formulate-input {
  @apply my-8;
}
.formulate-input-wrapper {
  @apply border-2 border-regal-blue-400;
}
.formulate-input-wrapper:hover {
  @apply border-red-900;
}
.formulate-input-label {
  @apply px-4 pt-3 pb-2 text-lg block w-full  bg-regal-blue-400;
}
.formulate-input-element input,
.formulate-input-element textarea,
.formulate-input-element select {
  @apply pb-4 px-4 w-full bg-regal-blue-400 text-xl;
}
.formulate-input-element button {
  @apply border-none;
}
.formulate-input-element--submit {
  width: fit-content;
  @apply py-1 px-4 bg-regal-blue-600 border-2 border-red-600 rounded-full tracking-wider;
}
.formulate-input-element input:focus,
.formulate-input-element select:focus {
  outline: none;
}
.formulate-input-errors {
  color: hsl(0, 100%, 40%);
}
</style>
0

There are 0 answers