iOS 占位符文本被裁剪，字体不会改变

Posted 2023-03-05

【中文标题】iOS 占位符文本被裁剪，字体不会改变

【英文标题】：iOS placeholder text being cropped and font won't change

【发布时间】：2014-02-02 22:10:19

【问题描述】：

我有以下代码为 ios 网络应用程序设置文本输入框的样式，但有 2 个问题。

html：

<input type="text" class="search" name="search" autocorrect="off" autocomplete="off"

placeholder="搜索...">

CSS：

::-webkit-input-placeholder  
    color:#f00;
    font-size: 2em;
    font-family: Open Sans Condensed, sans-serif;


input.search 
    -webkit-appearance: textfield;
   color: #333;
   background: #e9e9e9;
   font: normal 2em Open Sans Condensed, sans-serif;
   width: 80%;
   height: 8em;
   border: 1px solid #ccc;
   -webkit-border-radius: 12px;

第一个问题是当字体大小超过 1em 时，占位符文本被裁剪：

第二个问题是在文本字段中输入值时，字体不会从默认字体大小和字体类型改变：

我试过-webkit-appearance: none;

有人可以帮忙吗？

非常感谢！

【问题讨论】：

我通过添加以下内容来修复文本裁剪：line-height:2em;不过，在文本条目中重新调整字体大小仍然存在问题 - 任何人对此有帮助吗？

【参考方案1】：

测试一下：

yourInputName::placeholder 
   overflow: visible;

【讨论】：

如果溢出属性没有从其他地方设置（问题中的给定代码没有显示），您的解决方案将不会改变任何内容，因为溢出属性的默认值无论如何都是“可见的”。

【参考方案2】：

当我遇到第一个问题时，它是由输入字段字体大小小于占位符字体大小引起的。

您的 CSS 都显示为 2em，但请检查输入字段的字体大小是否没有被其他地方的 1em 覆盖（因为问题似乎出现在大于 1em 的占位符字体上）。