Q:

Form fields render different on different devices

I am working on a site with has responsive design i am facing rendering issue with forms fields on different devices & browsers.
for Firefox on phone and Tab (Android) It renders form fields differently either they come with rounded edges or gradient style.
How can i make them look same like simple rectangle with border.
CSS with i had applied is
input 
{
     box-sizing: border-box;
-moz-user-input:none;
-moz-user-select:none;
border: 1px solid #ccc;
font-size: 12px;
height: 30px;
line-height:30px;
vertical-align:middle;
padding-left: 5px;
color:#687074;
}
select {
border: 1px solid #ccc;
font-size: 13px;
height: 36px;
line-height:36px;
vertical-align:middle;
padding-left: 5px;
color:#687074;
}   

I tried could of open but it still come differently.
I have setup example on jsfiddle Frame only  Editable version
These form fields come with show or gradient inside fields. How can i remove all that and make it like simple with with border of 1px

A:

Try adding:
input:focus, select:focus {
    outline: none;
}
input, select{
    -webkit-appearance: none;
    border-radius:0;
    background-image: none;
    background-color:transparent;
}

