मैं पृष्ठभूमि ढाल के साथ एक फॉर्म करने की कोशिश कर रहा हूं, लेकिन मैं इसे इनपुट फ़ील्ड के नीचे नहीं चाहता हूं। मैं इनपुट फ़ील्ड में एक सफेद पृष्ठभूमि रंग देखना चाहता हूं, लेकिन मैं एक लेबल के कारण इस संपत्ति का उपयोग नहीं कर सकता, मुझे इसे पूरे रूप में सफेद स्टाइल करना है। मैं इस कोड का उपयोग कर रहा हूँ:

.login_form{
position: absolute;
  top: 50%;
  left: 50%;
width:80%;
height:auto;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  border-radius: 3px;
background-image: linear-gradient(to bottom right, #ffd27f, #ffe4b2, #ffd27f);
}
.col-3{width:68%;margin: 20px 16%; position: relative;padding-left:0;padding-right:0;!important}
input[type="text"],input[type="password"]{font: 14px/23px "Lato", Arial, sans-serif; color: #333;background-color:transparent; width: 100%; margin-

left:0%;box-sizing: border-box; letter-spacing: 1px;outline:none;border-radius:4px;}
.effect-16{padding: 6px 10px; border: 1px solid #aaa; border-radius:3px;background-color: transparent;}

.effect-16 ~ .focus-border{position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.4s;}
.effect-16:focus ~ .focus-border,
.has-content.effect-16 ~ .focus-border{width: 100%; transition: 0.4s;}
.effect-16 ~ label{position: absolute; left: 10px; width: 100%; font-size:85%; top: 7px; color: #888; transition: 0.3s; z-index:-1; letter-spacing: 0.5px;}
.effect-16:focus ~ label, .has-content.effect-16 ~ label{top: -20px; font-size: 12px; color: #3385ff; transition: 0.3s;}
.effect-16:focus + .has-content.effect-16 ~ label{top: -20px; font-size: 12px; color: #3385ff; transition: 0.3s;}
.curnot{cursor:not-allowed;}
.btni{pointer-events: none;margin-left:24%;width:52%;margin-bottom: 15px;text-align:center;background-color:#a0cad8;border:2px solid #a0cad8; 

outline:none; color:white;padding-top:7px;padding-bottom:7px;border-radius:3px;font:bold 92% Lato, sans-serif;}
.btni:hover{color:white;}
<form method="post" class="login_form" action="email_check.php" autocomplete="off">
<h1 class="title_login">Registrati</h1>
<div class="col-3 input-effect" style="margin-top:40px;">
            <input class="effect-16" type="text" name="username" id="username" autocomplete="off">
            <label>Scegli Username</label>
            <span class="focus-border" id="focususername"></span>
        </div>
<div class="col-3 input-effect">
            <input class="effect-16" type="text" name="email" id="email" autocomplete="off">
            <label>Email</label>
            <span class="focus-border" id="focusemail"></span>
        </div>
<div class="col-3 input-effect">
            <input class="effect-16" type="password" name="password" id="password" autocomplete="off">
            <label>Password</label>
            <span class="focus-border" id="focpassword"></span>
        </div>
<div class="col-3 input-effect">
            <input class="effect-16" type="password" name="confirm" id="confirm" autocomplete="off">
            <label>Conferma password</label>
            <span class="focus-border" id="focconfirm"></span>
        </div>
<div class="curnot">
<input type="submit" name="login" id="invia" class="btni" value="Avanti">
</div>
</form>

क्या मुझे इसका उपयोग करना चाहिए: चयनकर्ता नहीं? यदि हाँ, तो कैसे?

मेरी खराब अंग्रेजी के लिए क्षमा करें, मुझे आशा है कि इसे समझा जा सकता है।

0
Tommaso 7 फरवरी 2021, 14:32

2 जवाब

सबसे बढ़िया उत्तर

आप इन कोड का उपयोग कर सकते हैं

    .login_form{
    position: absolute;
      top: 50%;
      left: 50%;
    width:80%;
    height:auto;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      border-radius: 3px;
    background-image: linear-gradient(to bottom right, #ffd27f, #ffe4b2, #ffd27f);
    }
    .login_form .col-3{width: 68%;
    margin: 25px 16%;
    position: relative;
    padding-left: 0;
    padding-right: 0;
    background: #fff;
    border-radius: 4px;}
    input[type="text"],input[type="password"]{
          font: 14px/23px "Lato", Arial, sans-serif;
    color: #333;
    background-color: transparent;
    width: 100%;
    box-sizing: border-box;
    letter-spacing: 1px;
    outline: none;
    border-radius: 4px;
    position: relative;
    z-index: 1;
}
    .effect-16{padding: 6px 10px; border: 1px solid #aaa; border-radius:3px;background-color: transparent;}

    .effect-16 ~ .focus-border{position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.4s;}
    .effect-16:focus ~ .focus-border,
    .has-content.effect-16 ~ .focus-border{width: 100%; transition: 0.4s;}
    .effect-16 ~ label{position: absolute; left: 10px; width: 100%; font-size:85%; top: 7px; color: #888; transition: 0.3s;  letter-spacing: 0.5px;}
    .effect-16:focus ~ label, .has-content.effect-16 ~ label{top: -20px; font-size: 12px; color: #3385ff; transition: 0.3s;}
    .effect-16:focus + .has-content.effect-16 ~ label{top: -20px; font-size: 12px; color: #3385ff; transition: 0.3s;}
    .curnot{cursor:not-allowed;}
    .btni{pointer-events: none;margin-left:24%;width:52%;margin-bottom: 15px;text-align:center;background-color:#a0cad8;border:2px solid #a0cad8; 

    outline:none; color:white;padding-top:7px;padding-bottom:7px;border-radius:3px;font:bold 92% Lato, sans-serif;}
    .btni:hover{color:white;}
 

    <form method="post" class="login_form" action="email_check.php" autocomplete="off">
    <h1 class="title_login">Registrati</h1>
    <div class="col-3 input-effect" style="margin-top:40px;">
                <input class="effect-16" type="text" name="username" id="username" autocomplete="off">
                <label>Scegli Username</label>
                <span class="focus-border" id="focususername"></span>
            </div>
    <div class="col-3 input-effect">
                <input class="effect-16" type="text" name="email" id="email" autocomplete="off">
                <label>Email</label>
                <span class="focus-border" id="focusemail"></span>
            </div>
    <div class="col-3 input-effect">
                <input class="effect-16" type="password" name="password" id="password" autocomplete="off">
                <label>Password</label>
                <span class="focus-border" id="focpassword"></span>
            </div>
    <div class="col-3 input-effect">
                <input class="effect-16" type="password" name="confirm" id="confirm" autocomplete="off">
                <label>Conferma password</label>
                <span class="focus-border" id="focconfirm"></span>
            </div>
    <div class="curnot">
    <input type="submit" name="login" id="invia" class="btni" value="Avanti">
    </div>
    </form>

 
1
mahmoud elgazar 7 फरवरी 2021, 15:51

मुझे लगता है कि आपको इनपुट फ़ील्ड को सफेद रंग का पृष्ठभूमि रंग देना चाहिए और लेबल पर जेड-इंडेक्स को हटा देना चाहिए ताकि यह शीर्ष पर बैठे। मैंने देखा कि इनपुट के फोकस पर लेबल शीर्ष पर चला जाता है।

नीचे स्क्रीनशॉट देखें इनपुट को पृष्ठभूमि-रंग देकर फ़ॉर्म का परीक्षण किया

0
Anurella 7 फरवरी 2021, 15:21