html - Form fields render different on different devices -


i working on site has responsive design facing rendering issue forms fields on different devices & browsers.

for firefox on phone , tab (android) renders form fields differently either come rounded edges or gradient style.

how can make them same simple rectangle border.

css 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 of open still come differently.

i have setup example on jsfiddle frame editable version

these form fields come show or gradient inside fields. how can remove , make simple with border of 1px

try adding:

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

Comments

Popular posts from this blog

java - WrongTypeOfReturnValue exception thrown when unit testing using mockito -

php - Magento - Deleted Base url key -

android - How to disable Button if EditText is empty ? -