Result
何の項目か分かりやすく明示されたinput要素
css
input {
background: transparent;
}
input[type=text],
input[type=password] {
box-sizing: border-box;
background-color: rgba(255, 255, 255, 0.75);
padding: .5em 0;
border: 0.125em solid #dfdfdf;
border-radius: .25em;
width: 75%;
max-width: 25rem;
min-width: 10rem;
line-height: 1.618em;
font-size: 1.5rem;
transition: border-color 0.15s ease-in-out;
}
input[type=text]:focus,
input[type=text]:active,
input[type=password]:focus,
input[type=password]:active {
border-color: #53a0db;
}
input[type=password] {
font-weight: 700;
text-indent: .3em;
letter-spacing: .3em;
}
label {
transition: color 0.15s ease-in-out;
padding: 0 1em;
border-radius: 2em;
position: relative;
top: -1em;
background-color: rgba(255, 255, 255, 0.95);
margin-top: -2em;
display: inline-block;
color: #9a9a9a;
text-transform: uppercase;
font-size: 0.8125em;
letter-spacing: .1em;
text-indent: .1em;
}
label[for]:hover {
cursor: pointer;
}
input:focus + span > label {
color: #676767;
}
|
html
<div>
<input type="password" id="password" value="hoge">
<span>
<label for="password">パスワード</label>
</span>
</div>
|
via
Login form
