css3 placeholder 特效,使用CSS3 placeholder-shown过滤器（选择器）实现的浮动输入框标签...

CSS

语言：

CSSSCSS

确定

/* Magic Happens Here */

input:placeholder-shown + label {

opacity: 0;

transform: translateY(100%);

}

/* Other CSS to make it look cool */

html {

box-sizing: border-box;

font-family: sans-serif;

}

a {

color: #ffc600;

}

h2 {

font-size: 12px;

}

*,

*:before,

*:after {

box-sizing: inherit;

}

body {

min-height: 100vh;

display: flex;

justify-content: center;

align-items: center;

background: url('https://unsplash.it/1500/1000?image=1021');

background-size: cover;

}

form {

width: 500px;

border: 1px solid grey;

padding: 50px;

background: white;

box-shadow: 0 0 5px rgba(0, 0, 0, 0.41), 0 0 1px 20px rgba(0, 0, 0, 0.08);

}

input {

width: 100%;

padding: 20px;

margin: 20px 0;

border: 2px solid black;

transition: all 0.1s;

font-size: 20px;

}

.group {

position: relative;

}

input + label {

border: 1px solid black;

position: absolute;

top: 0;

left: 20px;

transition: all 0.1s;

opacity: 1;

background: white;

border: 2px solid;

border-width: 0 2px 0 2px;

padding: 0 5px;

transform: translateY(calc(50% + 5px));

}

input:focus {

outline: 0;

border-color: #ffc600;

}

input:focus + label {

border-color: #ffc600;

}