Ausrichten des Cursors auf die Platzhalter-Anfangsposition

Ich habe den folgenden HTML- und CSS-Code und die Ausgabe. Wenn ich auf die Eingabefelder klicke, möchte ich, dass sich der Cursor genau links neben dem Platzhaltertext befindet. Aber wenn ich auf den Eingang der Box klicke, erscheint der Cursor ganz am Anfang des Eingabefeldes. Wie kann ich den Cursor auf das Platzhalter-Startzeichen im Fokus ausrichten? DankAusrichten des Cursors auf die Platzhalter-Anfangsposition

HTML

<head> 
    <title>AUMC-Student Portal</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link href="css2/paper.css" rel="stylesheet" media="screen"> 
    <link href="css2/myCSS.css" rel="stylesheet" media="screen"> 
</head> 

<body> 
    <div class="Login-Form-Container"> 
     <form class="Inner-Portion"> 
      <div> 
       <input class="form-control" type="text" placeholder="Username" /> 
      </div> 
      <br> 

      <div> 
       <input class="form-control" type="password" placeholder="Password" /> 
      </div> 
      <br> 

      <select class="form-control controls"> 
       <option selected>Laptop</option> 
       <option value="">Mouse</option> 
       <option value="">Keyboard</option> 
       <option value="">Monitor</option> 
       <option value="">Hello World</option> 
      </select> 
      <br> 
      <br> 
      <button type="button" class="btn btn-default">Forgot</button> 
      <button type="button" class="btn btn-primary">Login</button> 
      <form/> 
    </div> 
</body> 

</html>

CSS

body { 
    background-color: #293037; 
    background-size: 1500px; 
} 

.Login-Form-Container { 

    background-color: dodgerblue; 
    width: 400pt; 
    height: 310pt; 
    text-align: center; 
    margin: 0 auto; 
} 

.Inner-Portion { 
    background-color: whitesmoke; 
    width: 400pt; 
    height: 300pt; 
    padding-top: 57pt; 

} 


.controls , .Inner-Portion div{ 
    margin: 0px auto; 
    width: 300px; 
} 


.form-control::-webkit-input-placeholder { 
    padding: 55px; 
} 


.Inner-Portion div{ 
    border: solid 1px #DDDDDD; 
} 

.btn-default , .btn-primary { 
    width: 150px; 
}

OUTPUT

Quelle

2017-02-21 Ahmed Jamil

Versuchen Sie 'input.formcontrol {padding-left: 55px}' – Sharlike

@Sharlike ich Ihren Code am Ende meiner CSS-Datei eingefügt Kopie hatte aber keine Wirkung. Was ist Formularsteuerung in Ihrem Code? Ist das der Name meiner Klasse? aber ist nicht mein Klassenname ist Formular-Steuerelement –

ja, es sollte 'input.form-control' sein. Wie auch immer, der Punkt ist, dass Sie das Padding links von der Eingabe einstellen können, was das erreichen soll, was Sie wollten. – Sharlike

Sie text-indent Eigenschaft nutzen können.

input.form-control { 
    box-sizing: border-box; 
    width: 100%; 
    text-indent: 30px; 
}

jsFiddle

Oder nur einige padding-left dafür gesetzt.

input.form-control { 
    box-sizing: border-box; 
    width: 100%; 
    padding-left: 30px; 
}

jsFiddle

Quelle

2017-02-21 21:17:37 Stickers

Danke, es funktioniert, ich sehe was hier passiert. Sie erstellen ein logisches Begrenzungsfeld um das Eingabefeld herum und füllen den Text darin auf. Habe ich recht ? Wenn ja, wenn wir nur einen logischen Container um das Eingabefeld herum brauchen, dann würde das Eingabefeld nicht innerhalb eines div platziert und der div-Text wird ausgerichtet? oder schaue ich ** Box Sizing ** Eigenschaft aus einem falschen Winkel?Ich habe versucht, dies zu tun, aber Ausgabe ist nicht das gleiche Aussehen hier https://jsfiddle.net/wns9vrje/3/ –

@ Ahmed.JI würde es tun, was oben, so ist es einfacher, wenn Sie einige Hervorhebung auf ': Fokus 'Wie dieser Screenshot, um die Farbe der unteren Grenze zu ändern. – Stickers

Ich sehe, du hast Recht. Danke nochmal. –

können Sie hinzufügen:

input.form-control { 
    width: 100%; 
    padding-left: 55px; 
}

und .form-Steuerung entfernen :: - Webkit-input-Platzhalter.

Das Snippet:

body { 
 
    background-color: #293037; 
 
    background-size: 1500px; 
 
} 
 

 
.Login-Form-Container { 
 

 
    background-color: dodgerblue; 
 
    width: 400pt; 
 
    height: 310pt; 
 
    text-align: center; 
 
    margin: 0 auto; 
 
} 
 

 
.Inner-Portion { 
 
    background-color: whitesmoke; 
 
    width: 400pt; 
 
    height: 300pt; 
 
    padding-top: 57pt; 
 

 
} 
 

 

 
.controls , .Inner-Portion div{ 
 
    margin: 0px auto; 
 
    width: 300px; 
 
} 
 

 

 
input.form-control { 
 
    width: 100%; 
 
    padding-left: 55px; 
 
} 
 

 
.Inner-Portion div{ 
 
    border: solid 1px #DDDDDD; 
 
} 
 

 
.btn-default , .btn-primary { 
 
    width: 150px; 
 
}

<div class="Login-Form-Container"> 
 
    <form class="Inner-Portion"> 
 
     <div> 
 
      <input class="form-control" type="text" placeholder="Username" /> 
 
     </div> 
 
     <br> 
 

 
     <div> 
 
      <input class="form-control" type="password" placeholder="Password" /> 
 
     </div> 
 
     <br> 
 

 
     <select class="form-control controls"> 
 
      <option selected>Laptop</option> 
 
      <option value="">Mouse</option> 
 
      <option value="">Keyboard</option> 
 
      <option value="">Monitor</option> 
 
      <option value="">Hello World</option> 
 
     </select> 
 
     <br> 
 
     <br> 
 
     <button type="button" class="btn btn-default">Forgot</button> 
 
     <button type="button" class="btn btn-primary">Login</button> 
 
     </form> 
 
</div>

Quelle

2017-02-21 21:14:33 gaetanoM

Sorry, aber es hat nicht funktioniert. Ich habe auch deinen Code-Schnipsel hier ausgeführt und seht selbst, dass er immer noch am Anfang der Eingabebox steht. –

Ich sehe und ich verwende Chrome, um genau zu sein. Ich bekam meine Lösung von @Pangloss und es funktionierte sogar auf Online-Editoren ohne die styles.css, die ich auf meiner Festplatte habe. Ich möchte wissen, warum dein Code nicht funktioniert hat? –

bevor ich dir weitere Fragen in den Kommentaren stelle, frage ich nur nach meiner Neugier und weise nicht auf deine Fehler hin. Sie sagen also, dass es auf Ihrem PC funktioniert. Funktioniert es immer noch, wenn Sie auf die Schaltfläche Code-Snippet ausführen unter Ihrer Antwort klicken und die exakt gleiche Ausgabe sehen. Ihre Ausgabe https://jsfiddle.net/vw71tnew/ und hier ist Pangloss Ausgabe https://jsfiddle.net/gnvjr07u/ –

Ausrichten des Cursors auf die Platzhalter-Anfangsposition

Antwort

Verwandte Themen