Question

我有以下HTML和CSS代码以及输出。当我单击输入框时，我希望我的光标正好位于占位符文本的左侧。但是当我单击输入框时，光标会在输入框的最开头显示。如何将光标对准焦点上的占位符起始字符。感谢

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;
}

输出

Answer 1

您可以使用text-indent属性。

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

<强> jsFiddle

或者只为它设置一些padding-left。

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

<强> jsFiddle

Answer 2

您可以添加：

 address contact key1    key2    name
0       NULL  123444  abc  ajdskj  ankush
1       NULL  456778  def    NULL   reddy
2  ashaskawe    NULL  aef    NULL    john

并删除.form-control :: - webkit-input-placeholder。

摘录：

＆＃13;

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

＆＃13;

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;
}

＆＃13;

Answer 3

这个代码就够了。

input {
   padding-left: 10px;
}

将光标对齐占位符起始位置

3 个答案: