input在点击的时候会出现位移

比卡超
  • 329

图片描述
看如下图片,在点击时会出现名字往下偏移?主要是哪个css引起呢?
代码也不复杂。是高度不够?但是我看他在开发模式下,他本来的框框已经往下位移了一点点。点击又恢复正常。求高手赐教

 <div class="selector-body">
                        <div class="specs">
                            <div class="specs-key">收货地址</div>
                            <div class="m-address-receiver">
                                <input class="m-addr-name" placeholder="名字" />
                                <input class="m-addr-mobile" placeholder="收货电话" />
                            </div>
                            <div class="m-addr-region">
                                <div class="m-addr-province"><select class="m-addr-select"><option value="0">选择省份</option></select></div>
                                <div class="m-addr-city"><select class="m-addr-select"><option value="0">选择城市</option></select></div>
                                <div class="m-addr-district"><select class="m-addr-select"><option value="0">选择地区</option></select></div>
                            </div>
                            <div class="m-addr-address">
                                <input id="address" placeholder="请填写详细街道地址" type="text">
                            </div>
                        </div>
                    </div>
回复
阅读 2.9k
2 个回答

很显然,问题出在css上,但是你又没有提供CSS文件。 猜测应该是Css中有定义元素获取焦点后的样式,类似下面的代码。 如果真是这样,找到后,去掉这些样式后你再看,应该就没有问题了。

经过反馈,问题不是:forcus属性导致,是动画问题。 我把作者提供的样式贴在我的回答中

 -webkit-transition: bottom 150ms ease-in-out 150ms;
         transition: bottom 150ms ease-in-out 150ms;
  -webkit-transform: translateZ(0);

待作者补充html结构和相应css 以后我再进一步追踪问题。

@deepgoing 没有Focus,但是我发现一个问题,我这个是一个浮动层,他切换的时候是有效果。如果我把效果去掉,就不会出现以上抖动。
是浏览器问题吗?

    -webkit-transition: bottom 150ms ease-in-out 150ms;
    transition: bottom 150ms ease-in-out 150ms;
    -webkit-transform: translateZ(0);
你知道吗?

宣传栏