Нужна поддержка CSS (эффект позиции и зависания)?

Question

Это мой код Mailchimp для подписки. Я настроил его в соответствии с моими потребностями.

1. Красная кнопка появляется ниже .., но я хочу переместить ее рядом (на том же уровне) (справа) почтовый ящик.

2. И как дать эффект зависания (до черного) на кнопку.

Я пробовал все попытки, но ничего не работает для меня. Надеюсь, кто-то может помочь. Я новичок в CSS. Спасибо.

#mailchimp { 
 
    background: #383838; 
 
    color: #ff2727; 
 
    padding: 40px 15px; 
 
} 
 
#mailchimp input { 
 
    border: medium none; 
 
    color: gray; 
 
    font-family: times new roman; 
 
    font-size: 16px; 
 
    font-style: bold; 
 
    margin-bottom: 15px; 
 
    padding: 10px 12px; 
 
    width: 350px; 
 
} 
 
#mailchimp input.email { 
 
    background: #fff; 
 
} 
 
#mailchimp input.name { 
 
    background: #fff; 
 
} 
 
#mailchimp input[type="submit"] { 
 
    background: #ff2727; 
 
    color: #fff; 
 
    cursor: pointer; 
 
    font-size: 20px; 
 
    width: 40%; 
 
    padding: 8px 0; 
 
} 
 
#mailchimp input[type="submit"]:hover { 
 
    color: #000000; 
 
}

<div id="mailchimp"> 
 
<form action="//askchange.us11.list-manage.com/subscribe/post?u=32e8df9557dd399bb3ba2ae61&amp;id=62317f4783" 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="indicates-required"><span class="asterisk">*</span> indicates required</div> 
 
     <div class="mc-field-group"> 
 
      <input type="email" value="Enter your email" name="EMAIL" SIZE="30" class="required email" id="mce-EMAIL"onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"> 
 
     </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_32e8df9557dd399bb3ba2ae61_62317f4783" tabindex="-1" value=""></div> 
 
     <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div> 
 
    </div> 
 
</form> 
 
</div>

Answer 1

Вам необходимо указать фиксированный размер контейнера входной и входной кнопок, а затем дать со 100% входному ящику и поплавок прямо к кнопке, после чего он будет вырезать правую и нижнюю части окна ввода. Добавьте эти изменения.

#mailchimp { 
    width: 400px; // give it a fixed size 
} 
#mailchimp input { 
    width: 100%; //give with 100% to it 
    box-sizing:border-box; 
} 
#mailchimp input[type="submit"] { 
    float: right; 
} 
#mailchimp input[type="submit"]:hover { 
    background-color:black; 
    color: white; 
} 

EDIT Изменение CSS и HTML, как показано ниже.

#mailchimp { 
     background: #383838; 
     color: #ff2727; 
     padding: 40px 15px; 
     width: 400px; 
    } 
    #mailchimp input { 
     border: medium none; 
     color: gray; 
     font-family: times new roman; 
     font-size: 16px; 
     font-style: bold; 
     margin-bottom: 15px; 
     padding: 10px 12px; 
     width: 100%; //give with 100% to it 
     box-sizing:border-box; 
    } 
    #mailchimp input.email { 
     background: #fff; 
    } 
    #mailchimp input.name { 
     background: #fff; 
    } 
    .mc-field-group { 
     width: 60%; 
     float: left; 
    } 
    #mailchimp input[type="submit"] { 
     background: #ff2727; 
     color: #fff; 
     cursor: pointer; 
     font-size: 20px; 
     width: 40%; 
     padding: 8px 0; 
     float: right; 
    } 
    #mailchimp input[type="submit"]:hover { 
     background-color:black; 
     color: white; 
    } 

и ваш HTML, как этот

<div id="mailchimp"> 
<form action="//askchange.us11.list-manage.com/subscribe/post?u=32e8df9557dd399bb3ba2ae61&amp;id=62317f4783" 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="indicates-required"><span class="asterisk">*</span> indicates required</div> 
     <div class="mc-field-group"> 
      <input type="email" value="Enter your email" name="EMAIL" SIZE="30" class="required email" id="mce-EMAIL"onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"> 
     </div> 
     <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></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_32e8df9557dd399bb3ba2ae61_62317f4783" tabindex="-1" value=""></div> 

    </div> 
</form> 
</div> 

Answer 2

Изменить цвет фона кнопки отправки на парении:

#mailchimp input[type="submit"]:hover { 
    background-color: #000000; 
} 

Позиция кнопку отправки на правой стороне:

#mailchimp input[type="submit"] { 
    float: right; 
} 

#mailchimp input.email { 
    float: left; 
} 

Смотрите, как работает поплавок: http://www.w3schools.com/css/css_float.asp

Answer 3

Добавить дисплей: блок на свой вход, а затем всплывают: слева.

Ваш наведение правильное, но вы меняете цвет текста только на черный. Изменить цвет: # 000000 'на' background-color: # 000000 '.