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.
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>