1

パスワード フィールドをクリックして Caps Lock をオンにすると表示される小さな灰色の Caps Lock 通知画像に問題があります。ボックスの右側に約 20 ピクセルのボックスの外側に地雷が表示されます。これは障害物を引き起こしているため、ユーザーはその位置にある div レイヤーを見ることができません。

パスワードフィールド内に私のものが表示されない理由と、それを中に入れる方法を教えてください。

私の HTML フォームは css で編集され、ボックスの上に画像の背景が表示されるので、css と関係があると思います。

しかし、私はそれに関連するものを見つけることができません。ありがとう。

コード：

<style>



#main{
        width:440px;
        height:0px;
        margin-top:1px;
        margin-left:10px;
        margin-bottom:0px; 
        position:relative;
        text-align:left;
    }

    #main form{
        width:440px;
        height:0px;
        padding-bottom:0px;
    }

    #main form .row{
        position:relative;

    }

    #main form .row.error:after,
    #main form .row.success:after{
        content:'';

        position:absolute;
        right: 60px;
        top: 8px;
        width:32px;
        height:32px;
        background:url('../img/icons.png') no-repeat;
        margin-right:50px;
    }

    #main form .row.error:after{
        background-position: 0 -79px;
    }

    #main form input[name=email],
    #main form input[name=password]{

        border:none;
        background:url('http://www.playtimeboys.com/img/form/text-boxes.png') no-repeat top left;
        font:14px 'Segoe UI','Arial',sans-serif;
        color:#888;

        outline:none;

        height: 48px;
        margin-top:22px;
        margin-left:-10px;
        padding: 0 10px 0 50px;
        width: 350px;
    }



    #main form .email input{
        background-position:0 -96px;
    }

    #main form .email input:focus{
        background-position:0 -144px;
    }


    #main form .password input{
        background-position:0 -193px;
    }

    #main form .password input:focus{
        background-position:0 -241px;
    }



    /*----------------------------
        The Submit Button
    -----------------------------*/


    #main form input[type=submit]{

        border: 1px solid #004C9B;
        border-radius: 3px 3px 3px 3px;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 1px rgba(0, 0, 0, 0.3);
        color: #D3EBFF;
        cursor: pointer;
        display: block;
        font: bold 24px Cambria,"Hoefler Text",serif;
        margin-top: -46px;
        margin-left:360px;
        padding-top: 7px;
        padding-bottom: 10px;
        text-shadow: 0 -1px 0 #444444;
        width: 100px;
        height:45px;
        position:absolute;
        z-index:100;

        background-color:#0496DA;

        background-image: linear-gradient(top, #0496DA 0%, #0067CD 100%);
        background-image: -o-linear-gradient(top, #0496DA 0%, #0067CD 100%);
        background-image: -moz-linear-gradient(top, #0496DA 0%, #0067CD 100%);
        background-image: -webkit-linear-gradient(top, #0496DA 0%, #0067CD 100%);
        background-image: -ms-linear-gradient(top, #0496DA 0%, #0067CD 100%);
    }

    #main form input[type=submit]:hover{

        background-color:#0383d3;

        background-image: linear-gradient(top, #0383d3 0%, #004c9b 100%);
        background-image: -o-linear-gradient(top, #0383d3 0%, #004c9b 100%);
        background-image: -moz-linear-gradient(top, #0383d3 0%, #004c9b 100%);
        background-image: -webkit-linear-gradient(top, #0383d3 0%, #004c9b 100%);
        background-image: -ms-linear-gradient(top, #0383d3 0%, #004c9b 100%);
        position:absolute;
        z-index:100;
    }

    #main form input[type=submit]:active{

        background-color:#026fcb;

        background-image: linear-gradient(top, #026fcb 0%, #004c9b 100%);
        background-image: -o-linear-gradient(top, #026fcb 0%, #004c9b 100%);
        background-image: -moz-linear-gradient(top, #026fcb 0%, #004c9b 100%);
        background-image: -webkit-linear-gradient(top, #026fcb 0%, #004c9b 100%);
        background-image: -ms-linear-gradient(top, #026fcb 0%, #004c9b 100%);
        position:absolute;
        z-index:100;
    }



    </style>
        </head>


    /*----------------------------
        The HTML
    -----------------------------*/


        <body>
            <div id="main">


                 <form action="login.php" method="post"  >

                    <div class="row email">
                        <input type="email" id="email" name="email" placeholder="Email" value="<?php echo htmlentities($email); ?>" />
                    </div>

                    <div class="row password">
                        <input type="password" id="password" name="password" placeholder="Password" value="<?php echo htmlentities($email); ?>" />
                    </div>
                    <input type="submit" name="submit" value="Login >"  />
                </form>
            </div>
        </body>
    </html>
4

1 に答える 1

0

問題は次のセクションにあります。

#main form input[name=email],
#main form input[name=password]{
    [...snip...]
    height: 48px;
    margin-top:22px;
    margin-left:-10px;
    padding: 0 10px 0 50px;
    width: 350px;
}

フィールドの設定が広すぎます。capslock 画像は通常、テキスト フィールド内に表示されます。また、コンテンツ ボックスの高さが大きすぎるため、通知機能が非常に大きく表示されます。代わりに試してください：

    height: 28px; // height of image - 20px
    margin-top:22px;
    margin-left:-10px;
    padding: 10px 10px 10px 50px; // extra 20px of padding on height
    width: 280px; // proper width of image, so contents don't overflow

なぜこれが起こったのかを理解するには、テキスト フィールドにスタイルを適用したとしても、それはまだどこかに残っていることを覚えておくと役に立ちます。スタイルを適用すると、下にあるテキストフィールドの実際の境界が見えにくくなります。border:none;テキストフィールドやその他のフォーム ウィジェットの書式設定に問題がある場合は、デフォルトの外観から変更されたスタイルを無効にして、システムがウィジェットの外観をどのように認識しているかを確認すると役立ちます。そこから、エラーがどこにあるかを簡単に見つけることができます。

于 2012-12-24T18:46:17.457 に答える