使用CSS更新输入字段

有没有一种方法可以在不更改HTML代码的情况下使用CSS更新输入字段

我有一张这样的表格：

//HTML

<div id="LoginFormContainer">
        <div class="formInputLine">
            <div class="inputContainer">
                 <input name="txtUserID$Textbox1" type="text" maxlength="15" id="txtUserID_Textbox1" placeholder="Username" title="Username">
            </div>
        </div>
        <div class="formInputLine">
            <div class="inputContainer">
                 <input name="txtPassword$Textbox1" type="password" maxlength="15" id="txtPassword_Textbox1" placeholder="Password" title="Password">
            </div>
        </div>
        <div class="formInputLine">
            <input type="submit" name="btnLogin" value="Login" id="btnLogin"><input name="builderID" type="hidden" id="builderID" value="abc">
        </div>
    </div>

//正在尝试CSS-可以使用此代码添加标签，但它适用于所有输入。不确定如何仅针对具有特定id的单个类

.formInputLine::before {
content: "Username";
}

并希望仅使用CSS将其更改为以下内容：

请注意，上面的代码实际上是我从第三方获得的代码的一部分。因此，我不确定是否可以通过iframe标记控制它

---

谢谢你的帮助，我非常感谢。

你可以得到这样的东西：

由于缺乏上下文，我加入了自己的字体

body{font系列：“Droid Sans”}
.Input元素{填充：.3em；边距：.5em 0}
.Input元素标签{显示：块；文本转换：大写；填充：.2em 0；字体大小：.8em}
.Input元素输入{边框：1px实心rgba（0,0,0,0.34）；填充：.5em；轮廓：无；过渡：边框.25s}
.Input元素输入：焦点{边框颜色：rgba（0,0,0,0.73）}

用户名
密码

您可以使用一些jquery和css

$（“输入”）.wrap（“”）；
$（'.custom input'）.eq（0）.before（“用户名”）；
$（'.custom input'）.eq（1）.before（“PASSWORD”）
：：-webkit输入占位符，：：-moz占位符，：-ms输入占位符{
颜色：透明；
}



如果输入字段包含包装器元素，则可以在该包装器上使用伪元素（之前或之后）使用纯css创建所需内容，否则必须使用javascript操作html结构/添加元素等

例如，如果我们有以下HTML结构：

<div class="input-wrapper">
    <input type="text" placeholder="some text">
</div>

（如果我们有占位符并且想要隐藏它，则使用此占位符。在生产时还应使用-moz-和-ms-前缀）。
我在这里使用了一些解决方案提供的想法。在与第N个孩子进行了一些研究之后，以下是我对我的问题的解决方案。我相信还有其他方法可以选择CSS。但这就是我现在所拥有的

使用下面的CSS可以分别针对这两个字段并添加特定的标签

 /* add labels */
.formInputLine:nth-child(1)::before {
content: "Username";
}
.formInputLine:nth-child(2)::before {
content: "Password";
}

/* remove place holder */
::-webkit-input-placeholder {
color: transparent; 
}

:-moz-placeholder {
 /* Firefox 18- */
 color: transparent;
}

::-moz-placeholder {
/* Firefox 19+ */
color: transparent;
}

:-ms-input-placeholder {
color: transparent;
}

您需要显示html-它们是占位符文本吗？绝对定位文本？我们不知道-如果它们是占位符，这是一个很好的起始块。请在此处包含您的CSS和HTML。是的，它可以只使用CSS完成，但建议使用，否。然后请提供OP@Waxi的答案，并提供缺点列表。我很好奇，如果标记如下：
@Waxi确切地说，这就是OP需要提供标记的原因。然后我们可以看看是否有包装器元素，我们可以挂钩。谢谢你的回答。很抱歉，我之前没有包含太多的信息。当我试图理解这是否可能时，根据stackoverflow，我认为答案是肯定的。绝对！只要你投入时间，你所看到的一切都是可能的；）如果这充分解决了您的问题，请确保投票并标记为已接受，这样其他人也可以从答案中受益！为了完整起见，您能在这里内联一个示例吗？
.input-wrapper {
    position: relative;
}

.input-wrapper:before {
    position: absolute;
    left: 0;
    bottom: calc( 100% + 10px );
    content: "some text";
}

::-webkit-input-placeholder { 
  color: transparent !important;
}

 /* add labels */
.formInputLine:nth-child(1)::before {
content: "Username";
}
.formInputLine:nth-child(2)::before {
content: "Password";
}

/* remove place holder */
::-webkit-input-placeholder {
color: transparent; 
}

:-moz-placeholder {
 /* Firefox 18- */
 color: transparent;
}

::-moz-placeholder {
/* Firefox 19+ */
color: transparent;
}

:-ms-input-placeholder {
color: transparent;
}