1
간단한 양식을 작성했으며 Google의 Material Design으로 스타일을 지정하고 싶습니다. 그러나 자리 표시 자 텍스트는 아래 스크린 샷과 같이 입력 된 텍스트의 방식으로 표시됩니다. 문제를 파악하고 해결하는 방법에 대한 도움을 주시면 감사하겠습니다.입력 된 텍스트와 중복되는 입력 자리 표시자를 수정하는 방법은 무엇입니까?
@import url(https://fonts.googleapis.com/css?family=Raleway:400,700);
body {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
background: #c0392b;
font-family: Raleway;
color: white;
letter-spacing: 1px;
}
#formreg {
width: 250px;
background: #fff;
border: 1px solid #ebebeb;
box-shadow: 0 27px 55px 0 rgba(0, 0, 0, .3), 0 17px 17px 0 rgba(0, 0, 0, .15);
}
#formbody.form-body {
padding: 1em 2em 1em 2em;
}
#formtitle.form-title {
width: 100%;
margin-bottom: 2em;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 50px;
font-size: 20px;
font-weight: bold;
background: #eee;
border-radius: 0;
}
#formbody #group1 input,
#formbody #group2 input,
#formbody #group3 input {
font-size: 15px;
padding: 10px 10px 10px 5px;
-webkit-appearance: none;
display: block;
background: #fff;
color: #636363;
width: 95%;
border: none;
border-radius: 0;
border-bottom: 1px solid #999;
}
#formbody #group1 input:focus,
#formbody #group2 input:focus,
#formbody #group3 input:focus {
outline: none;
}
/* Label */
#formbody #group1 label,
#formbody #group2 label,
#formbody #group3 label {
color: #999;
font-size: 15px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: all .2s ease;
}
/* active */
#formbody #group1 input:focus ~ label,
#formbody #group1 input.used ~ label,
#formbody #group2 input:focus ~ label,
#formbody #group2 input.used ~ label,
#formbody #group3 input:focus ~ label,
#formbody #group3 input.used ~ label {
top: -20px;
transform: scale(.75);
left: -2px;
/* font-size: 14px; */
color: #4a89dc;
}
/* Underline */
.bar {
position: relative;
display: block;
width: 100%;
}
.bar::before,
.bar::after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #4a89dc;
transition: all .2s ease;
}
.bar::before {
left: 50%;
}
.bar::after {
right: 50%;
}
/* active */
#formbody #group1 input:focus ~ .bar:before,
#formbody #group1 input:focus ~ .bar:after,
#formbody #group2 input:focus ~ .bar:before,
#formbody #group2 input:focus ~ .bar:after,
#formbody #group3 input:focus ~ .bar:before,
#formbody #group3 input:focus ~ .bar:after {
width: 50%;
}
/* Highlight */
.highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: .5;
}
/* active */
#formbody #group1 input:focus ~ .highlight,
#formbody #group2 input:focus ~ .highlight,
#formbody #group3 input:focus ~ .highlight {
animation: inputHighlighter 0.3s ease;
}
@keyframes inputHighlighter {
from {
background: #4a89dc;
}
to {
width: 0;
background: transparent;
}
}
/* Button */
.button {
position: relative;
display: inline-block;
padding: 12px 24px;
margin: .3em 0 0em 0;
width: 100%;
vertical-align: middle;
color: #fff;
font-size: 16px;
line-height: 20px;
-webkit-font-smoothing: antialiased;
text-align: center;
letter-spacing: 1px;
background: transparent;
border: 0;
border-bottom: 2px solid #3160B6;
cursor: pointer;
transition: all .15s ease;
}
.button:focus {
outline: 0;
}
/* Button modifiers */
.buttonBlue {
background: #4a89dc;
text-shadow: 1px 1px 0 rgba(39, 110, 204, .5);
}
.buttonBlue:hover {
background: #357bd8;
}
/* Ripples container */
.ripples {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: transparent;
}
/* Ripples circle */
.ripplesCircle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .25);
}
.ripples.is-active .ripplesCircle {
animation: ripples .4s ease-in;
}
/* Ripples animation */
@keyframes ripples {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
100% {
width: 200%;
padding-bottom: 200%;
opacity: 0;
}
}
.orange-text {
color: #fd7b1b;
}
.blue-text {
color: #1e73be;
}
.group {
position: relative;
margin-bottom: 45px;
}
.rule {
height: 2px;
background: #e8ebed;
margin: 0px 35px;
}<div id="regform">
<form id="formreg">
<div id="formtitle" class="form-title"><span class="orange-text">REGISTER </span> <span class="blue-text">FOR ACCOUNT INFO </span>
</div>
<div id="formbody" class="form-body">
<div id="group1" class="group">
<input type="text"><span class="highlight"></span><span class="bar"></span>
<label>Name</label>
</div>
<div id="group2" class="group">
<input type="email"><span class="highlight"></span><span class="bar"></span>
<label>Email</label>
</div>
<div id="group3" class="group">
<input type="email"><span class="highlight"></span><span class="bar"></span>
<label>Tel. Number</label>
</div>
</div>
<div id="formbutton">
<button type="button" class="button buttonBlue">Submit
<div class="ripples buttonRipples"><span class="ripplesCircle"></span>
</div>
</button>
</div>
</form>
</div>
대단히 감사합니다. CSS 입력 및 JS 스크립트가 트릭을 수행했습니다. 완벽하게 일했습니다. 엄청 고마워. – Selase