html - iOS 占位符文本被裁剪并且字体不会改变

Question

我有以下代码来为 iOS Web 应用程序设置文本输入框的样式，但有 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;

请问有人可以帮忙吗？

非常感谢!

Answer 1

测试一下:

yourInputName::placeholder {
   overflow: visible;
}