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
Post a Comment