How to fix search bar and button alignments

Hi there,

can you disable your optimization/cache plugin so i can take a look at whats going on there.

yes, deactivated

If you select the Search Button in the editor then you can change its colors from the settings panel.

The misalignment is because you have this CSS which is adding 10px top margin to buttons:

/* gp, mailchimp and ninja forms button styling */
button, html input[type="button"], input[type="reset"], input[type="submit"], a.button, a.button:visited {
    padding: 14px 20px;
    margin-top: 10px;
    border-radius: 0px;
    transition: all 0.6s ease 0s;
}

To stop that effecting the search button add this CSS:

.wp-block-search .wp-block-search__button {
    margin-top: 0;
}

In the setting panel, I can see only Width. not other options. Kindly check screenshot

Also, how to change the border color of the search field.

thanks.

Aah my bad - the colors are an option that will come in WP 5.9.
For now you need some CSS:

.wp-block-search button.wp-block-search__button {
    background-color: #f00;
    fill: #fff;
}

/* Hover colors */
.wp-block-search button.wp-block-search__button:hover {
    background-color: #000;
    fill: #fff;
}