CSS not working when preview form

Hi there, 

I have added some custom css to my form, when in design mood it looks perfect and works as it is supposed too but when I preview the form the hover css is not working. Can you please let me know what is the issue here.

Regards

Mark

Please change the .(dot) to :(colon) in the CSS code before hover which should be working fine. The CSS code can be as below:

#input_10:hover {

    background : #52247f;

    border : 2px solid;

    border-color : #52247f;

    color : #ffffff;

    font-weight : bold;

    text-shadow : none;

}

Hope this information helps! 

Thanks Kiran fix that work fine. I just seem to have white line at the top of the button when i hover over it? What is causing this? I would like this removed.

This is being caused by the box border. Please add the following code to the form so that it should be displaying with full background.

.form-submit-button {

    -webkit-box-shadow: none;

    box-shadow: none;

}

Hope this information helps! 

Thanks Kiran that work perfectly.