CSSを使用して入力フィールドを更新する

Question

HTMLコードを変更せずに入力フィールドを更新するためにCSSを使用する方法はありますか？

私はこのような形式があります：CSS TRYING

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

// - 追加するには、このコードを使用することができをすべての入力に適用されます。そのクラス内の特定のIDを持つ個々のクラスのみをどのように対象にするかはわかりません。

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

そして唯一のCSSを使用して次のように変更したいと思います：

上記のコードは実際に私は、サードパーティから得たこのコードの一部であることに注意してください。 iframeタグで制御できるかどうかはわかりません。

助けをいただき、ありがとうございます。

Answer 1

私はここでいくつかの解決策によって提供されたアイデアを試していました。私自身でいくつかの調査をした後：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; 
} 

Answer 2

あなたは次のようなことができます：

文脈の欠如のために私自身のフォントが含まれています。

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をクリック！入力フィールドは、あなたが望むものを作成するために、そのラッパーに擬似要素（前または後）を使用することができラッパー要素を持っている場合は

Answer 3

あなたは、いくつかの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">

Answer 4

を使用することができます純粋なCSSを使用しないと、HTML構造を操作する/要素を追加するなどのjavascriptを使用する必要があります。

したがって、例として、次の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; 
} 

私たちはプレースホルダを持っているし、我々はそれを非表示にする場合（これは1が使用されています。プロダクションでは、-moz-と-ms-の接頭辞も使用する必要があります）。