Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Form fields render different on different deivces

Form fields render different on different deivces

Problem

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

Problem courtesy of: Learning

Solution

Try adding:

input:focus, select:focus {
    outline: none;
}
input, select{
    -webkit-appearance: none;
    border-radius:0;
    background-image: none;
    background-color:transparent;
}
Solution courtesy of: SW4

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Form fields render different on different deivces

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×