Inaccurate rendering of border widths on IOS platform

After setting the border width of these input boxes to 1px, it appears that on iOS devices, the top border seems larger than intended (regardless of the browser being used).

Interestingly, on any other type of device, the border looks perfectly fine.

<!DOCTYPE html>
 <html>
  <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,minimum-scale=1">
   <title>iOS rendering test</title>
  </head>
  <body>
<style media="screen">
  input {
    border: 1px solid #ccc;
    height: 100px;
    margin: 5%;
  }
</style>
<form class="" action="index.html" method="post">
  <input type="text" name="" value="firstname">
  <input type="text" name="" value="lastname">
  <input type="text" name="" value="email">
  <input type="submit" name="submit" value="subscribe">
</form>
</body>
</html>

Answer №1

When styling an iOS input, be sure to eliminate default styles by using -webkit-appearance: none;

Your Custom Code

input {
  -webkit-appearance: none; /* Remember to include this */
  border: 1px solid #ccc;
  height: 100px;
  margin: 5%;
}

This article provides extra details on the appearance attribute.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: The argument passed to int() must be a string, bytes-like object, or number, not 'NoneType' (Issue when sending HTML input to Python)

#!C:\Users\aan\AppData\Local\Programs\Python\Python39\python.exe import numpy as np import skfuzzy as fuzz import cgi from skfuzzy import control as ctrl print("Content-type:text/html\r\n\r\n ...

Troubleshooting Boostrap Check Box Styling Problem in MVC 5

My registration form has a problem with the checkbox's alignment. I want the text to appear to the left of the checkbox, in line with the placeholders for the input fields on the page. Currently, the text is either above the checkbox (centered in its ...

Issue encountered with AJAX multiple image uploader

I'm attempting to create an PHP and JavaScript (jQuery using $.ajax) image uploader. HTML: <form method="post" action="php/inc.upload.php" id="upload-form" enctype="multipart/form-data"> <input type="file" id="file-input" name="file[]" a ...

Using the following-sibling selector in Java, you can easily click on all <li> elements within a <ul> tag

I am trying to navigate through the list of li elements starting from the "Mentorship" tag link <ul _ngcontent-cwp-c18="" class="navigation clearfix"> <li _ngcontent-cwp-c18="" routerlinkactive="current" ...

Arranging Check Boxes Side by Side

I am struggling to properly align the three checkboxes and tables next to each other. I have managed to get the checkboxes on the same row, but aligning them neatly has proven to be a challenge. Using Notepad++ as my development tool, I am facing formattin ...

The div seems to be resistant to centering no matter the effort. Applying padding doesn't seem to be the solution, and even setting

I often come across this question but I can never seem to find the answer when it comes to padding or margin. It's strange that I'm having trouble properly centering the ul element within the div, especially considering that the div needs to be i ...

`The value of an element within an array changes automatically`

In my current setup, I have a traditional array where each element represents an HTML element. The issue arises when I manipulate these elements within the array; any changes made to the HTML element also reflect in the array automatically. However, I pref ...

Is there a way to incorporate a refresh control feature underneath a section header?

Is it possible to add a refresh control below the section header of a table view, rather than at the top of the tableview? I want to achieve this layout for my project. ...

Using JQuery's .mouseover and .mouseout methods to modify font colors on a webpage

Hi there, I'm new to JQuery and trying to experiment with some basic functionalities. I have a simple navigation menu created using an unordered list, and I want to change the font color of the currently hovered list item using JQuery. However, I&apos ...

Animating the visibility of subviews within a UIView

One of the features of my app is displaying a UIView called EmptyCollectionView when my UICollectionView is empty. I currently have this set up by instantiating the UIView and using the addSubview method in the viewDidLoad function of my ViewController. Th ...

Maintain the tab order for elements even when they are hidden

Check out this demonstration: http://jsfiddle.net/gLq2b/ <input value="0" /> <input id="test" value="1" /> <input value="2" /> By pressing the TAB key, it will cycle through the inputs in order. If an input is hidden when focused, press ...

Tips for modifying the appearance of an anchor <a> element within a table cell with jQuery

One issue I am facing involves changing the style of a specific element within a table cell using jQuery. The change needs to be based on the value in another cell. Below is the table structure: <table id="table"> ...

conceal the mustard-colored dots within the overlay

Whenever I trigger the link, a modal window pops up, but it comes with an unwanted black background color and yellow dots. How can I prevent the yellow dots from showing up on the overlay? http://jsfiddle.net/y88WX/18/embedded/result/ <nav class="da-d ...

What is the best way to retrieve the value of a component's HTML id tag in React?

Is there a way for me to retrieve the id of a react component from within the component itself? I need this information to perform some tasks with a third-party library. In Ember, you can access the component's id using elementId, which can be found ...

Trouble with jQuery on click function, no actions triggered

I am having trouble with this jQuery function that is supposed to post the value of a variable to a PHP page and display it in the correct status class. I have included the necessary jQuery file, but for some reason, nothing is happening. Any assistance w ...

Place information from an input field into a specific row within a table

Utilizing Angular 4, I am developing a frontend application for a specific project. The interface features a table with three rows that need to be filled with data from an external source. https://i.stack.imgur.com/Dg576.png Upon clicking the "aggiungi p ...

Scaled-down navigation when scrolling

Is there a way to make the navigation bar shrink when scrolling, similar to how it functions on this website? The transition on this site is so seamless. I'm guessing it's achieved with JQuery. ...

Padding on hover for navigation bar dropdowns

Having issues with a drop-down navigation menu that works fine except for the "videos" item. The hover color change doesn't cover the entire width due to padding settings. Struggling to fix this without affecting the "photography" item. Need help figu ...

Tips for adjusting image dimensions with url() method in css

I have successfully incorporated collapsible functionality on my page. I would like to display a down arrow image instead of the default '+' symbol on the right side of the collapsible section. To achieve this, I can use the following CSS code s ...

Steps to trigger a JavaScript popup from an iframe window to the parent window

Currently I am developing a web application using JSP with JavaScript. Within the parent window, an iframe is being utilized. The issue arises when a button in the iframe page is clicked, as it opens a popup window within the iframe itself. However, my obj ...