Question

所以基本上我需要一个带有占位符的输入字段＆＃34; Name＆＃34;在左侧，占位符＆＃34; Michael＆＃34;在输入字段的另一侧（右侧）。因此，当用户开始在文本字段中键入内容时，文本将从右侧开始，但占位符＆＃34;名称＆＃34;应该固定，并始终留在屏幕上。

示例：

[Name:------------------Michael]
[Last name:--------------Dawson]
[City:-----------------New York]

所以＆＃39; Michael＆＃39;，＆＃39; Dawson＆＃39;和纽约＆＃39;是用户提供的信息（用户输入）。

所以在用户开始输入表单之前就是这样：

[Name:-------------------------]
[Last name:--------------------]
[City:-------------------------]

当用户开始输入他的输入时，从右边开始。

[Name:-----------------------Mi]
[Name:---------------------Mich]
[Name:------------------Michael]

这可以用纯html / css完成吗？

这是我到目前为止所做的：https://jsfiddle.net/7hv76swy/

Answer 1

这样的事情：

input {
    direction: rtl;
    padding-left:45px;
}
div {
    display:block;
    position:relative;
}
span {
    position:absolute;
    top:0;
    left:2px;
}

<div><span>Name:</span><input/></div>

Answer 2

您可以使用输入的占位符属性，并将其设置为与输入的文本不同的样式：

＆＃13;

input {
    text-align: right;
}
input::-webkit-input-placeholder {
    text-align: left;
}
input:-moz-placeholder {
    /* Firefox 18- */
    text-align: left;
}
input::-moz-placeholder {
    /* Firefox 19+ */
    text-align: left;
}
input:-ms-input-placeholder {
    text-align: left;
}

＆＃13;

<input type="text" placeholder="Name:">

＆＃13;

Answer 3

是的，你可以这样做。因此，我们需要两个 <input>标记。一个位于左侧，一个位于右侧。左侧的属性只读，因此没有人可以输入。右侧的位置仅适用于输入。使用style="direction: rtl"。把这两个放在一起。左边没有边框。右边没有左边的边框。为两个<input>标记指定相同的边框。右<input>有一个margin-left: -(2 * border-width)px。

Example

输入字段有两个条目 - 一个在左边，一个在右边

3 个答案: