[Resolved] Custom Styling Cred Form Button

[Author]

Posts

[sianE]

I am following this:
https://toolset.com/forums/topic/cant-seem-to-edit-the-submit-button-on-form-with-css/

But when I add the div label to my button, and add the custom css, it still doesn't work.

I have added this to the expert mode form:

<div class="form-button">[cred_field field='form_submit' output='bootstrap' value='Submit' class='btn btn-primary btn-lg']</div>

And added this to the custom css:

.form-button {
padding: 7px 15px 7px 15px;
font-size: 15px;
}

The page I have tried it on: (you will have to log in to view this)
hidden link

[Luo Yang]

Hello,

I have checked the URL you mentioned above, I can see only a login form.

If it needs to logged-in user, please provide the credentials in below private message box

[Luo Yang]

I have checked it in your website, your custom CSS codes does work in frontend, but it only work for the outer HTML tag, if you want to style the button directly, you can modify your CSS codes as below:

.form-button input[type='submit']{
  padding: 7px 15px 7px 15px;
  font-size: 15px;
}

[sianE]

That worked for this form (this is a user form), but when I used the same code for my other forms (all others are post forms), the font size did not change. Is it a different tag for post forms? The form html looks the same for the submit button on all forms.

[Christopher Amirian]

Hi there,

We suggested the CSS code according to the HTML code you mentioned in the question.

You will need to check the HTML code for the other forms and see what is the correct CSS selector that you need to use in that case.

You can give a URL of the form (make it so that we can access it without need to login) and we will do our best to give you the correct CSS selector.

Thanks.

[sianE]

Hopefully you can now access these forms

hidden link
hidden link

However I have 3 forms for editting posts that you must be the author of to edit.

[Christopher Amirian]

Hi there,

I can not see the form. Would you please set the next reply as private and provide the login information so that I can see ethe forn in the front end.

I will not touch anything just to be able to see the form.

Thanks.

[Christopher Amirian]

Hi there,

Thank you. For those two instances you will need to add the CSS code below:

input.form-submit {
    padding: 7px 15px 7px 15px;
    font-size: 15px;
}

Thanks.

[sianE]

Thanks everyone this worked