Question

有没有办法在不更改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

#FormLoginPage #LoginFormContainer .formInputLine .inputContainer input {
    text-transform: uppercase!important;
}

#FormLoginPage #LoginFormContainer .formInputLine .inputContainer input {
    border: none;
    font-size: 12px;
    width: 100%;
    color: #333;
    outline: 0;
    -webkit-appearance: caret;
}

//尝试CSS - 能够使用此代码添加标签，但它适用于所有输入。不确定如何仅定位具有特定ID的单个类。

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

并且只想使用CSS将其更改为以下内容：

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

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

Answer 1

如果输入字段有包装元素，你可以在该包装上使用伪元素（之前或之后）用纯css创建你想要的东西，否则你必须使用javascript来操作html结构/添加元素等

因此，举个例子，如果我们有以下HTML结构：

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

我们可以在CSS中执行以下操作：

.input-wrapper {
    position: relative;
}

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

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

（如果我们有占位符并且我们想要隐藏它，则使用这个。在生产时也应该使用-moz-和-ms-前缀。）

Answer 2

你可以这样：

由于缺乏上下文，我已经包含了我自己的字体。

＆＃13;

body {font-family: "Droid Sans"}

.Input-Element {padding: .3em;margin: .5em 0}
.Input-Element label {display: block;text-transform: uppercase;padding: .2em 0;font-size: .8em}
.Input-Element input {border:1px solid rgba(0, 0, 0, 0.34);padding:.5em;outline:none;transition: border .25s}
.Input-Element input:focus {border-color: rgba(0, 0, 0, 0.73)}

＆＃13;

<link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet">

<div class='Input-Element'>
  <label>Username</label>
  <input name='user'>
</div>

<div class='Input-Element'>
  <label>Password</label>
  <input name='psw'>
</div>

＆＃13;

注意： 点击 Run Code Snippet 查看表单！

Answer 3

你可以使用一些jquery和css

＆＃13;

addSlide()

＆＃13;

$("input").wrap("<div class='custom-input'></div>");
$('.custom-input').eq(0).before("<label>USER NAME</label>");
$('.custom-input').eq(1).before("<label>PASSWORD</label>");

＆＃13;

::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder {
  color: transparent;
}

＆＃13;

Answer 4

我正在玩这里的一些解决方案提供的想法。经过我自己的一些研究：nth-child，这是我对我的问题的解决方案。我确信还有另一种方法可以进行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;
}

使用CSS更新输入字段

4 个答案: