使用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更新輸入字段

回答

相關問題