CSS: Styling von Abonnieren-Feld

[Till00]

Hallo,

ich versuche gerade, für einen Blog eine Textbox genau so aussehen zu lassen, wie eine andere im gleichen Menü auf der gleichen Seite. Das ganze ist eine Wordpress-Installation und die erste (gut aussehende) Textbox ist Teil des Themes. Die zweite Textbos, die aussehen soll wie die erste, kommt von einem Plugin, das es Besuchern ermöglichen soll, den Blog zu abonnieren.

Hier mal der Abschnitt der CSS-Datei des Themes:

#searchform, .subscribe {    margin-bottom:20px;    padding:0;}
#searchform div, #search-form div {    width:100%;    padding:10px 15px;    height:55px;    border:1px solid #424242;    background-color:#232323;    box-sizing:border-box;    -moz-box-sizing:border-box;}
#searchform label, #search-form label {    display:none;}
#searchform input, #search-form input {    padding:5px 0;    width:75%;    height:25px;    font-size:18px;    color:#fff;    border:0 none;    background-color:#232323;}
#searchform input::-webkit-input-placeholder, #search-form input::-webkit-input-placeholder { color:#636363; }#searchform input::-moz-placeholder, #search-form input::-moz-input-placeholder { color:#636363; } /* firefox 19+ */#searchform input:-ms-input-placeholder, #search-form input:-ms-input-placeholder { color:#636363; } /* ie */#searchform input:-moz-placeholder, #search-form input:-moz-input-placeholder { color:#636363; }
#searchform #searchsubmit, #search-form .submit {    padding:5px 0;    width:20%;    height:35px;    float:right;    font-size:16px;    color:#fff;    text-align:center;    border:0 none;    background-color:#E45635;    cursor:pointer;}

Hier, was ich mittels Jetpack "Edit CSS" hinzugefügt habe:

#emailSub-form div {    width: 100%;    padding: 10px 15px;    height: 55px;    border: 1px solid #424242;    background-color: #232323;    box-sizing: border-box;    -moz-box-sizing: border-box;}
#emailSub-form label {    display: none;}
input[type="text"],input[type="email"],textarea input {    padding: 5px 0;    width: 75%;    height: 25px;    font-size: 18px;    color: #fff;    border: 0 none;    background-color: #232323;}
input[type="text"],input[type="email"],textarea input::-webkit-input-placeholder {    color: #636363;}
input[type="text"],input[type="email"],textarea input::-moz-input-placeholder {    color: #636363;}
/* firefox 19+ */input[type="text"],input[type="email"],textarea input:-ms-input-placeholder {    color: #636363;}
/* ie */input[type="text"],input[type="email"],textarea input:-moz-input-placeholder {    color: #636363;}
input[type="submit"],textarea {    padding: 5px 0;    width: 20%;    height: 35px;    float: right;    font-size: 16px;    color: #fff;    text-align: center;    border: 0 none;    background-color: #E45635;    cursor: pointer;}

Der Quelltext des Widgets/Plugins:

        <ul id='emailSub-widget'>            <div id="emailSub-output" style="display:none;"></div>            <form id="emailSub-form" action="<?php echo site_url('wp-admin/admin-ajax.php')?>">                <input type="hidden" name="success_msg" id="emailSub-success" value="<?php echo $instance['success_msg'];?>" />                <input type="hidden" name="fail_msg" id="emailSub-fail" value="<?php echo $instance['fail_msg'];?>" />                <?php                global $polylang;                if(isset($polylang)) { ?>                    <input type="hidden" name="language" id="emailSub-language" value="<?php echo pll_current_language();?>" />                <?php } ?>                <input type="text" name="email" id="emailSub-email" placeholder="Email:" />                                <input type="submit" class="submit" value="<?php echo $instance['submit_button'];?>" />                <?php if ($promotion): ?>                <br />                <div style="margin-top: 0.4em; font-size: 70%;">Created by <a href="http://www.webfish.se">Webfish</a>.</div>                <?php endif; ?>            </form>


        </ul>

Hier noch drei Screenshots aus Chrome:
http://cl.ly/X8oj
http://cl.ly/X8sf
http://cl.ly/X8Wt

Auf dem zweiten Screenshot sieht man, wie es aussehen soll, auf dem dritten, wie es tatsächlich aussieht. Wie Ihr seht, habe ich mich schon etwas angenähert, nur die Box um die Textbox und den Button will mir nicht gelingen.

 

[beage]

....

Bah, das sieht ja über aus. Formatier das doch mal richtig, damit man überhaupt erstmal durchsteigt.

Dann schick bitte einen Link zu der Seite, so lässt sich das mit Firebug wesentlich einfacher untersuchen.