在移动网站上提交按钮奇怪的渲染

时间:2016-05-06 10:25:55

标签: css forms button mailchimp

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

Desired button look

这就是我想要的。但是,看起来这个是移动设备:

Undesired button look

This就是我可以在这个主题上找到的,但当我尝试将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-->
&#13;
&#13;
&#13;

希望有人可以提供帮助,谢谢!

1 个答案:

答案 0 :(得分:4)

您需要添加:

tabHost.setOnTabChangedListener(new OnTabChangeListener() {
    @Override
    public void onTabChanged (String tabId){

        for (int i = 0; i < tabHost.getTabWidget().getChildCount(); i++) {
            tabHost.getTabWidget().getChildAt(i).setBackgroundColor(Color.parseColor("#FF0000")); // unselected
            TextView tv = (TextView) tabhost.getTabWidget().getChildAt(i).findViewById(android.R.id.title); //Unselected Tabs
            tv.setTextColor(Color.parseColor("#ffffff"));
        }

        tabHost.getTabWidget().getChildAt(tabHost.getCurrentTab()).setBackgroundColor(Color.parseColor("#0000FF")); // selected
        TextView tv = (TextView) tabhost.getCurrentTabView().findViewById(android.R.id.title); //for

        //Selected Tab
        tv.setTextColor(Color.parseColor("#000000"))

    }
});

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

检查here以查找其他非webkit浏览器。