在移动网站上提交按钮奇怪的呈现

Question

我的 mailchimp 注册表单上的提交按钮在计算机上如下所示：

这就是我想要的。但是，它看起来像一个移动设备：

这就是我能找到的关于该主题的全部内容，但是当我尝试将该 css 片段添加到我的代码时，它不起作用。

这是嵌入表单的代码：

    <!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
	#mc_embed_signup{background:#F7F7F7; clear:left; font:14px Helvetica,Arial,sans-serif; }
	/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
	   We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="//melbournetranspersonalcounselling.us13.list-manage.com/subscribe/post?u=1f8cb29351b8590d963ade17b&amp;id=5c7aecb295" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
<div class="mc-field-group">
	<input type="text" value="" placeholder="First Name" name="FNAME" class="required" id="mce-FNAME">
</div>
<div class="mc-field-group">
	<input type="email" value="" placeholder="Email Address" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
	<div id="mce-responses" class="clear">
		<div class="response" id="mce-error-response" style="display:none"></div>
		<div class="response" id="mce-success-response" style="display:none"></div>
	</div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_1f8cb29351b8590d963ade17b_5c7aecb295" tabindex="-1" value=""></div>
    <div class="show"><input type="submit" value="Yes please!" style="background:#47C0B0" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>

<!--End mc_embed_signup-->

希望有人能帮忙，谢谢！

Answer 1

您需要添加：

-webkit-appearance: none 

按钮的属性并根据需要设置样式

检查这里的其他非WebKit浏览器。