1

私は以下のフォームを持っています、

ここに画像の説明を入力

テキストボックスの下ではなく、テキストボックスの右側に緑色の画像が必要です。

フィールドが検証されると、画像が表示されます。

私のCSS

<style type="text/css"> 
        .formcontainer{
            border-radius: 10px;  
            -moz-border-radius: 10px; 
            -webkit-border-radius: 10px; 
            box-shadow: 0 0 4px #ccc; 
            -webkit-box-shadow: 0 0 4px #ccc; 
            -moz-box-shadow: 0 0 4px #ccc;  
            border:1px solid #ccc;
            padding:15px;
            width: 300px; 
            margin:0 auto;
        }
        form {
            margin:0 auto; 
            text-align:left;
            width:100%;
            background:#fff;    
            behavior: url(./border-radius.htc);
            font-family:Calibri;
            height: auto;
        }
        fieldset.border{
            overflow:hidden;
            border:1;
            -moz-border-radius:5px;  
            border-radius: 5px;  
            -webkit-border-radius: 5px;
            margin:3px 0;
            padding:10px;
            border:solid 1px #C0C0C0;
        }
        fieldset.no_border{
            overflow:hidden; 
            border:0; 
            padding:0 0 10px 0; 
            margin:0;
        }
        fieldset.no_border_submit{
            overflow:hidden;
            border:0;
            text-align:center;
            margin:3px 0;
        }
        input.effect {

            border:1px solid #ccc;  
            height: 20px;
            padding:3px;
            width:70%;
            font-size:14px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;

        }


        .cssSubmitButton {          
            font-size: 12px;
            background: #fff no-repeat 4px 5px;
            display: inline-block;
            padding: 5px 20px 6px;
            color: #333;
            border:1px solid #ccc;
            text-decoration: none;
            font-weight: bold;
            line-height: 1.9em;
            border-radius: 15px;
            -moz-border-radius: 15px;
            -webkit-border-radius: 15px;
            -moz-box-shadow: 0 1px 3px #999;
            -webkit-box-shadow: 0 1px 3px #999;
            position: relative;
            cursor: pointer;
            outline:none;
        }

        .cssSubmitButton:visited {}

        .cssSubmitButton:hover {
            border:1px solid #333;
        }

        #subscribeForm span{
            margin-left: 0px;
            color: #b1b1b1;
            font-size: 11px;
            font-style: italic;
            display:none;
        } 
        fieldset.border{
            overflow:hidden;
            border:1;
            -moz-border-radius:5px;  
            border-radius: 5px;  
            -webkit-border-radius: 5px;
            margin:3px 0;
            padding:10px;
            border:solid 1px #C0C0C0;
        }
        fieldset.no_border{
            overflow:hidden; 
            border:0; 
            padding:0 0 10px 0; 
            margin:0;
        }
        fieldset.no_border_submit{
            overflow:hidden;
            border:0;
            text-align:center;
            margin:3px 0;
        }
        #subscribeForm input.error{
            background: #f8dbdb;
            border-color: #e77776;
        }

        #subscribeForm span.error{
            color: #e46c6e;
            display:block;
        }
        #success{
            display:none;
        }
        #button{
            text-align:center;
        }

    </style>

私のhtml

<div class="formcontainer">
<form method="post" action="" id="subscribeForm" name="subscribeForm">
    <fieldset class="no_border">
        <label>Login ID: </label><br /><input type="text" class="effect" name="login_id" id="login_id"  autocomplete="off" ><img id="login_id_correct" style="display:none" src="./images/tick.png" />
        <span id="login_idInfo">Valid E-mail please, you will need it to log in!</span>
    </fieldset>
    <fieldset class="no_border">
        <label>Name: </label><br /><input type="text" class="effect" name="name" id="name"  autocomplete="off" >
        <span id="nameInfo">What's your name?</span>
    </fieldset>

    <fieldset class="no_border">
        <label>Contact No: </label><br /><input type="text" class="effect" name="contact_no" id="contact_no"  autocomplete="off" >
        <span id="contact_noInfo">Valid E-mail please, you will need it to log in!</span>
    </fieldset>

    <fieldset class="no_border">
        <label>Email: </label><br /><input type="text" class="effect" name="email" id="email"  autocomplete="off" >
        <span id="emailInfo">Valid E-mail please, you will need it to log in!</span>
    </fieldset>

    <fieldset class="no_border">
        <label>Password: </label><br /><input type="password" class="effect" name="password1" id="password1"  autocomplete="off" >
        <span id="password1Info">Valid E-mail please, you will need it to log in!</span>
    </fieldset>

    <fieldset class="no_border">
        <label>Retype: </label><br /><input type="password" class="effect" name="password2" id="password2"  autocomplete="off" >
        <span id="password2Info">Valid E-mail please, you will need it to log in!</span>
    </fieldset>

    <div id="button">
        <input type="submit" value="Subscribe" name="subscribeForm"/>
    </div>
    <div id="success">
        <strong>Data Saved Successfully.</strong>
    </div>
</form>
</div>

また、各テキストボックスが検証されると、テキストボックスの右側に画像が追加されるように、CSSクラスを作成する方法はありますか。

4

1 に答える 1

0

試す

fieldset input {
  float:left;
}

以前にブロックに設定した場合は、入力をインラインまたはインライン ブロックに設定する必要があるかもしれません。

http://jsbin.com/akiviw/1/edit

またはjsを変更する

$('#login_id_correct').css('display','block')

に

$('#login_id_correct').css('display','inline-block')
于 2013-08-02T19:22:09.073 に答える