How to have transparent, outline-less and borderless input field on mobile Safari browser?

Question

I am wanting to get the input fields on Safari on the iPhone to look like this JS FIDDLE. Currently I have tried this, which does not produce what I would like:

 .input
  {
    -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
outline: none;  
border:none;
border-color: transparent;
border: 0;
outline: 0;
background: transparent;
border-bottom: 1px solid grey;
width: 250px;
 }

The fields look like the input in the fiddle on desktop in Safari, just not on the phone.

Answer 1

This answer should be what you're looking for. You can remove the rounded corners with the border-radius property for iOS5+ and -webkit-appearance property for older versions. So your CSS would look like this:

.input {
    border: 0;
    outline: 0;
    background: transparent;
    border-bottom: 1px solid grey;
    width: 250px;
    border-radius: 0;
    -webkit-appearance: none;
}

New fiddle: https://jsfiddle.net/ct5s8pr9/

Answer 2

I needed to add -webkit-border-radius:0px;