Turn off iPhone/Safari input element rounding

by

On iOS 5 and later:

input {
  border-radius: 0;
}

input[type="search"] {
  -webkit-appearance: none;
}

If you must only remove the rounded corners on iOS or otherwise for some reason cannot normalize rounded corners across platforms, use input { -webkit-border-radius: 0; } property instead, which is still supported. Of course do note that Apple can choose to drop support for the prefixed property at any time, but considering their other platform-specific CSS features chances are they’ll keep it around.

On legacy versions you had to set -webkit-appearance: none instead:

input {
    -webkit-appearance: none;
}

More Related Contents:

  1. My Website is Mirror-flipped on iPhone Devices
  2. How to remove margin space around body or clear default css styles
  3. Disable Auto Zoom in Input “Text” tag – Safari on iPhone
  4. CSS background-size: cover replacement for Mobile Safari
  5. How do I remove the blue styling of telephone numbers on iPhone/iOS?
  6. How can i change the icon color to some other color in CSS?
  7. Unable to scroll on website
  8. Why not use tables for layout in HTML? [closed]
  9. CSS margin terror; Margin adds space outside parent element [duplicate]
  10. How can I position my div at the bottom of its container?
  11. Make CSS Hover state remain after “unhovering”
  12. How do I not underline an element in a link?
  13. How create table only using tag and Css
  14. CSS Single-column layout centered fixed-width 100% height w header and footer
  15. How can I correctly select the first or the last child with CSS?
  16. Should I size a textarea with CSS width / height or HTML cols / rows attributes?
  17. How do change the color of the text of an within a ?
  18. Vertical (rotated) text in HTML table
  19. Should image size be defined in the img tag height/width attributes or in CSS? [duplicate]
  20. CSS filter:invert not working with background-color
  21. CSS position absolute and full width problem
  22. Size of font in CSS with slash
  23. Equal width columns in CSS Grid
  24. How do I change the font-size of an element within ?
  25. Ticks for type=”range” HTML input
  26. How to make a radio button look like a toggle button
  27. Styling autocomplete dropdowns in browsers
  28. Giving background-color to body applying whole page. Why?
  29. How do I make a text input non-editable?
  30. Create wavy borders in CSS for top and bottom borders

Leave a Comment