Learning Learning - 3 years ago 64
CSS Question

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

SW4 SW4
Answer Source

Try adding:

input:focus, select:focus {
    outline: none;
}
input, select{
    -webkit-appearance: none;
    border-radius:0;
    background-image: none;
    background-color:transparent;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download