Comment form customization and CSS

I am trying to customize the look and feel of our blog comment form, so I've wrote the following code in comments.php


<?php
comment_form(
array('author' => '<p class="mdl-cform-label">' . '<label for="author">' . __( 'First, Last Name' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) . '<input id="author" name="author" type="text" class="mdl-cform-input" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' p>',
'email' => '<p class="mdl-cform-label"> <label for="email">' . __( 'Your Email' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) . '<input id="email" name="email" type="text" class="mdl-cform-input" value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
'url' => '<p class="mdl-cform-label"> <label for="url">' . __( 'Website' ) . '</label>' . '<input id="url" name="url" type="text" class="mdl-cform-input" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></p>',
'comment_field' => '<p class="mdl-cform-label"> <label for="comment">' . _x( 'Comment', 'noun' ) . '</label><textarea id="comment" name="comment" class="mdl-cform-input" cols="45" rows="8" aria-required="true"></textarea></p>',
'must_log_in' => '<p class="must-log-in">' . sprintf( __( 'You must be logged in to post a comment.' ), wp_login_url( apply_filters( 'the_permalink', get_permalink( $post_id ) ) ) ) . '</p>',
'logged_in_as' => '<p class="logged-in-as">' . sprintf( __( 'Logged in as %2$s. Log out?' ), admin_url( 'profile.php' ), $user_identity, wp_logout_url( apply_filters( 'the_permalink', get_permalink( $post_id ) ) ) ) . '</p>',
'comment_notes_before' => '<p class="comment-notes">' . __( 'We will never publish your email address. Period.' ) . ( $req ? $required_text : '' ) . '</p>',
'comment_notes_after' => '',
'id_form' => 'commentform',
'id_submit' => 'submit',
'label_submit' => __( 'Send' ),
'title_reply' => __( 'Leave a Reply' ),
'title_reply_to' => __( 'Leave a Reply to %s' ),
)
);

?>

and in website CSS file:


.mdl-cform-input

{

color: #000000;

background: #FFFFCC;

font-size: 9pt;

border: 1px solid #000000

}

.mdl-cform-label {

color: #000000;

font-size: 9pt;

font-weight: bold;

}

Now I am facing a problem that only the comment field and comment label apply the CSS changes in (mdl-cform-input,mdl-cform-label) , all other fields (Author, Email and URL) don't apply the CSS changes

So can someone please tell me what I might be doing wrong here?

Another question, is there any way I can control the 'Submit button' and the whole comment form background with CSS through Comment_form parameters?

Thanks in advance for your time and efforts