Question

我正在尝试缩短嵌入式mailchimp注册代码中某些表单输入字段的长度。我已经尝试在每个输入字段中添加一个大小标记，但这不起作用。我想我需要用CSS编辑。我不知道如何引用每个单独的输入字段并缩小长度。有人可以帮忙吗？我还没有机会开始学习CSS。

万分感谢！

 <style type="text/css">
    #mc_embed_signup{background:#fff; 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. */

#form input[type="email"] {

    width: 100px;
}

</style>
<div id="mc_embed_signup">
<form action="//GNND.us9.list-manage.com/subscribe/post?u=9c4e5486333883976fbe87bb0&amp;id=f4b7e7abf4" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
    <h2>Subscribe to our mailing list</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
    <label for="mce-EMAIL">Email Address  <span class="asterisk">*</span>
</label>
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
    <label for="mce-FNAME">First Name  <span class="asterisk">*</span>
</label>

Answer 1

没有id="form"的元素，因此选择器不会匹配任何内容。

您可以改为匹配表单元素：

form input[type="email"]

或者使用表单的实际ID：

#mc-embedded-subscribe-form input[type="email"]

Answer 2

这有点“蛮力”，但它对!important来说对我有用，就像下面这样：

#mc-embedded-subscribe-form input[type="email"]{ width: 300px!important; }

通过CSS缩短表单输入长度

2 个答案: