How to customise the appearance of newsletter form fields with CSS? Email block field

I want to change the appearance of this particular newsletter form field.

Email is the only field (which is required), I want to change the following:

1) Remove the white box, so it is transparent and just a white line with the placeholder text and no 'Required * asterisk above)
2) Either add the arrow in replacement of the submission button OR centre the text and button for mobile view only.

I'd still like to centre the heading and paragraph text *only* for mobile view *only on this page* (not on desktop view)

Actual site and reference attached.

Any ideas?

Hi,

Can you share link to your site? We can check easier

manfortoday.com

Password: mft1996

On 3/24/2023 at 7:41 PM, johnpaulstuthridge said:

manfortoday.com

Password: mft1996

Which page are you referring to? I don't see newsletter on homepage

10 hours ago, tuanphan said:

Which page are you referring to? I don't see newsletter on homepage

It's in the footer as a link 'Newsletter'

14 hours ago, tuanphan said:

Which page are you referring to? I don't see newsletter on homepage

Sorry,

use the site URL with slug: /dress-code-cheat-sheet

You'll see it then.

 Add to Design > Custom CSS

div.form-block form input.field-element {
    background: transparent !important;
    border-top: none !important;
    border-left: 0 !important;
    border-right: 0 !important;
}
@media screen and (max-width:767px) {
div.form-block form input.field-element {
    text-align: center !important;
}
}