使用CSS更新输入字段

-4

有没有办法使用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

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

// TRYING CSS - 能够使用这个代码添加标签，但它适用于所有输入。不知道如何只针对具有特定ID的单个类。

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

，并想将其更改为以下只使用CSS：

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

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

来源

2017-03-17 Alocus

你需要显示HTML - 他们占位符的文本？绝对定位文本？我们无法知道 - 如果他们是占位符，这是一个好的凝视块http://stackoverflow.com/questions/2610497/change-an-html5-inputs-placeholder-color-with-css –

请包括您的CSS和HTML这里 –

是的，它可以只用CSS来完成，但它是推荐的，不。 – Slime

我在这里玩的是一些解决方案提供的想法。经过一些研究后，我自己用：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; 
}

来源

2017-03-19 02:56:48 Alocus

你可能有这样的事情：

我包括我自己的字体，由于缺乏上下文。

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

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

注：点击Run Code Snippet看到形式！

来源

2017-03-17 18:43:04

感谢您的回答。对不起，我之前没有提供太多的信息。正如我试图了解是否有可能，我认为根据stackoverflow的答案是肯定的。 – Alocus

绝对！任何你看到的都是可能的，只要你花时间做出来;）如果这能够充分解决你的问题，请确保上传和标记为已接受，所以其他人也可以从答案中获益！ –

你可以使用一些jQuery和CSS

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" valu "USER NAME" placeholder="USER NAME"><br> 
 
<input type="passsword" placeholder="PASSWORD">

来源

2017-03-17 18:52:58

如果输入的字段有包装元素，你可以对包装使用伪元素（之前或之后）来创建你想要什么与纯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-前缀）。

来源

2017-03-17 19:16:59

为了完整起见，你可以在这里列举一个例子吗？ –

使用CSS更新输入字段

回答

相关问题