通过CSS缩短表单输入长度

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; }