How to style Formkit submit button with css?

Question

I am using formkit with vue3. I have also imported genesis theme for the formkit. But I want to style the submit button from it's default blue color to another color with css. but don't know how to do that.

here is the code:

<FormKit type="form" id="form-bootstrap" @submit="submitHandler" :actions="false" #default="{ value }">
          <FormKit
            type="text"
            name="email"
            label="Your email"
            placeholder="[email protected]"
            help="What email should we use?"
            validation="required|email"
            validation-visibility="submit"
          />
          <div class="col-2">
            <FormKit
              type="submit"
              label="Submit"
              :submit-attrs="{
                inputClass: 'submit-btn'
              }"
            />
          </div>
        </FormKit>

I have tried different things but it doesn't seem to work.

Answer 1

You can achieve this using the :classes styling override. It's admittedly quite confusing how to override the styling for individual elements. You should really be using the new theme builder: https://themes.formkit.com/

Docs: https://formkit.com/essentials/styling#styling#classes-prop

Demo: https://formkit.link/08f2e1f24ebe8ebc7da0b1a0b24a0858

Example code:

<template>
  <FormKit type="form" id="form-bootstrap" @submit="submitHandler" :actions="false" #default="{ value }">
    <FormKit
      type="text"
      name="email"
      label="Your email"
      placeholder="[email protected]"
      help="What email should we use?"
      validation="required|email"
      validation-visibility="submit"
    />
    <div class="col-2">
      <FormKit
        type="submit"
        label="Submit"
        :classes="{
          outer: {
            'my-button': true
          },
          input: {
            $reset: true
          }
        }"
      />
    </div>
  </FormKit>

</template>

<style scoped>
.my-button {
  background-color: #c1c1c1;
  border-radius: 1rem;
  text-align: center;
  padding: 5px;
}
</style>