![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
-
AuthorPosts
-
May 30, 2024 at 12:27 pm #1447067
Hi there
I’ve developed a site which requires some customisation on the submit button to match other buttons.
See the private link which shows the arrow I’d like to add before the Submit form button.
I’ve looks for various solutions but none have worked.
Thanks
RichardMay 31, 2024 at 4:37 am #1447134Hey Richard,
Thank you for the inquiry.
You can try this css code to insert the arrow icon before the submit button text.
div#avia_6_1 + .form_element:before { content: ''; background: url('https://meridiancivilengineering.co.uk/wp-content/uploads/2024/05/arrow.svg'); width: 30px; height: 30px; display: block; position: absolute; z-index: 100; top: 10px; left: 12px; } div#avia_6_1 + .form_element input.button { padding-left: 50px; }
Best regards,
IsmaelMay 31, 2024 at 11:20 am #1447173Hey Ismael
This is fantastic thank you. Been trying to find a fix for years for the submit button styling.
Richard
-
This reply was modified 3 months, 1 week ago by
raslade.
May 31, 2024 at 1:54 pm #1447183Hi,
Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.
Best regards,
RikardMay 31, 2024 at 2:04 pm #1447186big hussle is that it is no button element – it is an input – with button functionality.
if it is a button tag – then styling is much easier.you can change that by child-theme functions.php snippet:
function change_input_to_button_tag(){ ?> <script> (function($) { function replaceElementTag(targetSelector, newTagString) { $(targetSelector).each(function(){ var inputvalue = $(this).attr('value'); var newElem = $(newTagString, {html: $(this).html()}); $.each(this.attributes, function() { newElem.attr(this.name, this.value); }); $(this).replaceWith(newElem); newElem.append('<span class="submit">'+inputvalue+'</span>'); }); } replaceElementTag('.avia_ajax_form input.button', '<button></button>'); }(jQuery)); </script> <?php } add_action('wp_footer', 'change_input_to_button_tag');
May 31, 2024 at 3:38 pm #1447193Hey there, this is very useful and I’ll test on one of my other Enfold sites.
Thanks
Richard -
This reply was modified 3 months, 1 week ago by
-
AuthorPosts
- You must be logged in to reply to this topic.