入力タイプ= "text"フィールドがあります。 intiallyフィールドはフィールド名を含む必要があります。ユーザーがその入力フィールドをクリックすると、フィールド名は上に移動し、値を入力するためのスペースを残す必要があります。ユーザーが入力フィールドをクリックしたときに入力テキストフィールドのラベルを上に移動する方法 - angularjs
Googleで検索しましたが、私のニーズに関連する解決策が見つかりませんでした。
誰でも私を助けることができれば嬉しいです。
あなたが望む事は材料設計を実装することによって達成することができます。これを使用：https://codepen.io/sevilayha/pen/IdGKH
* { box-sizing:border-box; }
/* basic stylings ------------------------------------------ */
body \t \t \t \t { background:url(http://scotch.io/wp-content/uploads/2014/07/61.jpg); }
.container \t \t {
font-family:'Roboto';
width:600px;
margin:30px auto 0;
display:block;
background:#FFF;
padding:10px 50px 50px;
}
h2 \t \t {
text-align:center;
margin-bottom:50px;
}
h2 small {
font-weight:normal;
color:#888;
display:block;
}
.footer \t { text-align:center; }
.footer a { color:#53B2C8; }
/* form starting stylings ------------------------------- */
.group \t \t \t {
position:relative;
margin-bottom:45px;
}
input \t \t \t \t {
font-size:18px;
padding:10px 10px 10px 5px;
display:block;
width:300px;
border:none;
border-bottom:1px solid #757575;
}
input:focus \t \t { outline:none; }
/* LABEL ======================================= */
label \t \t \t \t {
color:#999;
font-size:18px;
font-weight:normal;
position:absolute;
pointer-events:none;
left:5px;
top:10px;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
/* active state */
input:focus ~ label, input:valid ~ label \t \t {
top:-20px;
font-size:14px;
color:#5264AE;
}
/* BOTTOM BARS ================================= */
.bar \t { position:relative; display:block; width:300px; }
.bar:before, .bar:after \t {
content:'';
height:2px;
width:0;
bottom:1px;
position:absolute;
background:#5264AE;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
.bar:before {
left:50%;
}
.bar:after {
right:50%;
}
/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
width:50%;
}
/* HIGHLIGHTER ================================== */
.highlight {
position:absolute;
height:60%;
width:100px;
top:25%;
left:0;
pointer-events:none;
opacity:0.5;
}
/* active state */
input:focus ~ .highlight {
-webkit-animation:inputHighlighter 0.3s ease;
-moz-animation:inputHighlighter 0.3s ease;
animation:inputHighlighter 0.3s ease;
}
/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
\t from { background:#5264AE; }
to \t { width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
\t from { background:#5264AE; }
to \t { width:0; background:transparent; }
}
@keyframes inputHighlighter {
\t from { background:#5264AE; }
to \t { width:0; background:transparent; }
}<div class="container">
<h2>Google Material Design in CSS3<small>Inputs</small></h2>
<form>
<div class="group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Name</label>
</div>
<div class="group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Email</label>
</div>
</form>
<p class="footer">
a <a href="http://scotch.io/tutorials/css/google-material-design-input-boxes-in-css3" target="_blank">tutorial</a> by <a href="http://scotch.io" target="_blank">scotch.io</a>
</p>
</div>材料の使用が設計し、あなたが材料入力ボックスを探しているmd-input-container
<md-input-container class="md-block">
<label>Username</label>
<input type="text">
</md-input-container>
使用することができます。角度材料の – mehulmpt
は、https://material.angularjs.org/latest/demo/inputから入手できます –