Question

我目前有一个小问题，文本框中的文本占位符在IOS设备上查看时似乎没有显示，但在桌面和Android上工作正常......

这只是一个带有输入字段的简单div。

这是我正在使用的代码：

<div id="em_inputs" class="hidden clearfix">
    <input type="text" name="first_name" id="first_name" placeholder="First Name">
</div>

@mixin Opacity($value){
  $IEValue: $value*100;
  opacity: $value;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity="+$IEValue+")";
  filter: alpha(opacity=$IEValue);
}

 #em_inputs{
            -webkit-appearance: none;
            -webkit-border-radius:0; 
            border-radius:0;
            overflow: hidden;
            position: relative;
            top: 127px !important;
            width: 100%;
            input {
                overflow: hidden;
                -webkit-appearance: none;                   
                -webkit-border-radius:0; 
                border-radius:0;
                border: none;
                width: 100%;
                padding: 12px 5px 11px 10px;
                color: $text-white;
                background: url("../img/bg_input.png") repeat 0 0;
                margin: 10px 0 0 0;
                @include Opacity(0);
                position: relative;
                top: -10px;
                height: 3px;
                overflow: hidden;
                &:focus{
                    border: 2px solid $text-white;
                }
            }

我还使用此代码，以便在浏览器使用特殊规则时使占位符文本为白色。

::-webkit-input-placeholder {
   color: white;
}

:-moz-placeholder { /* Firefox 18- */
   color: white;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: white;  
}

:-ms-input-placeholder {  
   color: white;  
}

::-webkit-scrollbar { 
     display: none; 
}

有人知道我发生了什么吗？我不仅对修复代码感兴趣，而且知道是否有人遇到与IOS占位符相同的问题，一般有点挑剔？

可能是因为背景图片呢？

Answer 1

我找到了答案。

更改设备的方向时会显示占位符的文本。那就是改变浮动。

我所做的就是在页面完全加载之前我重置浮动并且它可以工作。

这是帮助我的源头。

http://www.456bereastreet.com/archive/201301/the_mysterious_webkit_placeholder_overflow_bug/

IOS上的占位符文本输入

1 个答案: