0

テキスト ボックス内をクリックし、マウス ボタンを押したまま上下にドラッグすると、テキスト ボックスがコンテナ内で移動します。問題は 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>
4

1 に答える 1

1

.inputOverGateクラスの高さの宣言を削除する必要があります。私はあなたのフィドルのデモンストレーションを更新しました: http://jsfiddle.net/V66ts/1/

于 2012-06-24T14:48:20.813 に答える