将光标对准占位符的起始位置

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>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

输出值

Answer 1

Sti*_*ers 5

您可以使用text-indent属性。

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

Run Code Online (Sandbox Code Playgroud)

jsFiddle

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

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

Run Code Online (Sandbox Code Playgroud)

jsFiddle

归档时间：	9 年，3 月前
查看次数：	2489 次
最近记录：	9 年，3 月前