How to make uniform styling

I'm creating this form: https://form.jotform.co/90851560184862 and I have got several questions. The form is created using basic elements and also using Checkbox in dropdown widget. 

1. How do I make sure that all the fonts are the same? The fonts within Checkbox in Dropdown widget is different than basic drop down element. 

2. When I click the text area, the color of text area outline is different for different element. In the example of the above mostly the outline color is green for text box, but it is blue for drop down list and there's no color for Checkbox in Dropdown widget. 

3. How do I make sure that all buttons have the same style. I have two buttons in form, Submit for and File Upload form. How do I make sure I have the same style for both.

Thanks

In order to adjust styling of specific elements, you would need to inject custom CSS codes to the form. For example, for Checkbox in Dropdown widget, I can suggest to try the following code:

.selecter .selecter-item, .selecter-selected {

font-style:normal !important;

font-weight:normal !important;

font-size: 0.9em !important;

font-family:"Roboto", sans-serif;}

Please add it following this guide: How-to-Inject-CSS-Codes-to-Widgets

Can you please provide some more information on text area outline colors? Could you name the fields which have different outline so we checked them closer? If you can post a screenshot, we would appreciate it: How-to-Post-Screenshots-to-Our-Support-Forum

Also, the buttons seem to be both black, would you like to make them same size and padding?

Please see screenshot for what I meant by text area outline color. I wonder if there's an easy way to make it all have the same color. 

And about the button, I want to be able to adjust the width/height for each one. And also I want to make the background changes color on mouse hover. I can do it with Submit button using the following code: 

.form-submit-button:hover {

    background-image : none !important;

    background-color : #d14210 !important;

}

I don't know how to do it on the other button though. Even better if there's a way to do this for all buttons.

Screenshot:

Please inject the custom CSS code below and see if that meets your requirement.

#input {
    outline-color : none!important;
}
.form-line.jf-required {
    background-color : white!important;

}
.qq-upload-button.None:hover {
    background-image : none !important;
    background-color : #d14210 !important;
}

Guide: How to Inject Custom CSS Codes

By the way, you can use advanced designer if you want to inject a CSS code into your form. It's easier to use, you just need to click on the fields and you can modify the properties of the fields using custom CSS.

Hello it doesn't seem to work. And also, I cannot use Advance CSS editor - for widget. So I cannot change the background color of text area or drop-down list either.

To remove the outline of focused form fields, add this CSS code to the form:

.form-line-active input:focus {

  outline: none !important;

  border : 1px solid #ccc !important;

}

.form-line-active textarea:focus {

  outline: none !important;

  border : 1px solid #ccc !important;

}

select:focus {

outline: none;

}