iOS 表单控件占位符垂直对齐

Question

I'm currently developing an Angular 4 web application using Bootstrap 3 in which i have several text and select inputs.我目前正在使用 Bootstrap 3 开发一个 Angular 4 Web 应用程序，其中我有几个文本和选择输入。 Select inputs are not a problem, they're working correctly, but in text input fields i have a problem with placeholders.选择输入不是问题，它们工作正常，但在文本输入字段中，我的占位符有问题。

My input code is like this (just a standard input):我的输入代码是这样的（只是一个标准输入）：

<input type="text" class="form-control" placeholder="Email">

I can see it as it's supposed to be in Chrome/Firefox in desktop and several Android devices with different versions, but in iOS 11+ devices (iPhone 6S,8,8 Plus,X) with different browsers it looks like the image:我可以看到它应该在桌面的 Chrome/Firefox 和几个不同版本的 Android 设备中，但在具有不同浏览器的 iOS 11+ 设备（iPhone 6S、8、8 Plus、X）中，它看起来像图像：

If i remove the "form-control" class from the email field it looks like this image:如果我从电子邮件字段中删除“form-control”类，它看起来像这个图像：

Does anybody knows a solution which doesn't involve removing "form-control" and changes styles in all text input fields in my app or change the webkit placeholder css position (as this solution could make the web style change in several browsers and not just in Safari)?有没有人知道一个解决方案，它不涉及删除“表单控件”并更改我应用程序中所有文本输入字段中的样式或更改 webkit 占位符 css 位置（因为此解决方案可以在多个浏览器中更改 web 样式，而不仅仅是在 Safari 中）？

Answer 1

I can't see imgur pictures (corporate proxy), but if the vertical align of an input is your issue, the solution is using the line-height property.我看不到 imgur 图片（公司代理），但如果输入的垂直对齐是您的问题，则解决方案是使用line-height属性。 You can either fix the value, or get the height of the input and set the value dynamically.您可以固定该值，也可以获取输入的高度并动态设置该值。

Here is an example with a rather large input.这是一个输入相当大的示例。

 input.form-control { margin: 24px; width: 200px; height: 100px; line-height: 100px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <input type="text" class="form-control" placeholder="Email">

iOS 表单控件占位符垂直对齐

问题描述

1 个解决方案

解决方案1
1

iOS 表单控件占位符垂直对齐

问题描述

1 个解决方案

解决方案1 1

解决方案1
1