如何在WebKit中阻止文本框在其容器内移动

时间:2012-06-24 14:42:17

标签: html css google-chrome webkit

如果在文本框内单击,按住鼠标按钮并开始上下拖动,文本框将在容器内移动。问题出在WebKit上。

重要的是不要改变隐藏溢出的绝对容器内的输入结构

http://jsfiddle.net/V66ts/

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>

<style type="text/css">
.inputOverGateContainer
{
    top:0px;
    width: 100px;
    height: 22px;
    background-color: transparent;
    position: absolute;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    overflow: hidden;
    z-index: 5;
    padding-left:3px;
    padding-right:3px;
     -webkit-touch-callout: text;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;

}

.inputOverGate
{   

    font-size:17px;
    background-color: #fff;
    border: 1px solid #000;
    outline: none;
    width: 100%;
    height: 100%;
    color:#8292b4;
    text-shadow: 1px 1px 3px #000;
    -webkit-touch-callout: text;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;

}
</style>
</head>

<body>
    <div class="inputOverGateContainer"><input  class="inputOverGate" name="" type="text"></div>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

您需要删除.inputOverGate类的高度声明。我更新了你的小提示演示:http://jsfiddle.net/V66ts/1/