html5输入框输入有效的选择效果

褪色

html：

1. <link rel="stylesheet" type="text/css" >
   
2. <div class="exp-container">
   
3.   <h2 class="exp-title">Using  <span>:valid</span> selector in CSS</h2>
   
4.   <div class="exp">
   
5.     <input type="text" class="exp__input" id="example" name="test" placeholder="Full Name" required>
   
6.     <label class="exp__label" for="example" data-icon="&#62589;" data-icon-ok="&#62461;">Full Name</label>
   
7.   </div>
   
8.   <div class="exp">
   
9.     <input type="email" class="exp__input" id="example2" name="test" placeholder="Email" required>
   
10.     <label class="exp__label" for="example2" data-icon="&#62498;" data-icon-ok="&#62461;">Email</label>
    
11.   </div>
    
12. </div>

复制代码

CSS：

1. <font size="4">html,</font>
   
2. <font size="4">body {</font>
   
3. <font size="4">  background-color: #F4F4F4;</font>
   
4. <font size="4">  display: flex;</font>
   
5. <font size="4">  width: 100%;</font>
   
6. <font size="4">  height: 100%;</font>
   
7. <font size="4">  align-items: center;</font>
   
8. <font size="4">  font-family: "Work Sans", sans-serif;</font>
   
9. <font size="4">  justify-content: center;</font>
   
10. <font size="4">}</font>
    
11. <font size="4">
    
12. </font>
    
13. <font size="4">.exp-container {</font>
    
14. <font size="4">  width: 100%;</font>
    
15. <font size="4">  padding: 30px;</font>
    
16. <font size="4">  box-sizing: border-box;</font>
    
17. <font size="4">  max-width: 600px;</font>
    
18. <font size="4">}</font>
    
19. <font size="4">
    
20. </font>
    
21. <font size="4">.exp {</font>
    
22. <font size="4">  display: flex;</font>
    
23. <font size="4">  flex-direction: column-reverse;</font>
    
24. <font size="4">  width: 100%;</font>
    
25. <font size="4">  margin-bottom: 30px;</font>
    
26. <font size="4">  position: relative;</font>
    
27. <font size="4">  flex-wrap: wrap;</font>
    
28. <font size="4">}</font>
    
29. <font size="4">
    
30. </font>
    
31. <font size="4">.exp__label {</font>
    
32. <font size="4">  transition: 0.3s;</font>
    
33. <font size="4">  margin-bottom: 5px;</font>
    
34. <font size="4">}</font>
    
35. <font size="4">
    
36. </font>
    
37. <font size="4">.exp__label:before {</font>
    
38. <font size="4">  content: attr(data-icon);</font>
    
39. <font size="4">  font-weight: normal;</font>
    
40. <font size="4">  font-family: "Ionicons";</font>
    
41. <font size="4">  font-size: 24px;</font>
    
42. <font size="4">  position: absolute;</font>
    
43. <font size="4">  left: 0;</font>
    
44. <font size="4">  transform: rotateY(90deg);</font>
    
45. <font size="4">  bottom: 0;</font>
    
46. <font size="4">  height: 52px;</font>
    
47. <font size="4">  background: transparent;</font>
    
48. <font size="4">  color: #000;</font>
    
49. <font size="4">  transform-origin: left;</font>
    
50. <font size="4">  display: flex;</font>
    
51. <font size="4">  align-items: center;</font>
    
52. <font size="4">  justify-content: center;</font>
    
53. <font size="4">  transition: color .3s 0s ease, transform .3s 0s ease;</font>
    
54. <font size="4">  width: 42px;</font>
    
55. <font size="4">}</font>
    
56. <font size="4">
    
57. </font>
    
58. <font size="4">.exp__input {</font>
    
59. <font size="4">  border: 1px solid #ddd;</font>
    
60. <font size="4">  padding: 0 10px;</font>
    
61. <font size="4">  width: 100%;</font>
    
62. <font size="4">  height: 52px;</font>
    
63. <font size="4">  transition: 0.3s;</font>
    
64. <font size="4">  font-weight: normal;</font>
    
65. <font size="4">  box-sizing: border-box;</font>
    
66. <font size="4">  font-family: "Work Sans", sans-serif;</font>
    
67. <font size="4">  outline: none;</font>
    
68. <font size="4">}</font>
    
69. <font size="4">
    
70. </font>
    
71. <font size="4">.exp__input:focus {</font>
    
72. <font size="4">  padding-left: 42px;</font>
    
73. <font size="4">  border-color: #bbb;</font>
    
74. <font size="4">}</font>
    
75. <font size="4">
    
76. </font>
    
77. <font size="4">.exp__input:focus + label:before {</font>
    
78. <font size="4">  transform: rotateY(0deg);</font>
    
79. <font size="4">}</font>
    
80. <font size="4">
    
81. </font>
    
82. <font size="4">.exp__input:valid {</font>
    
83. <font size="4">  padding-left: 42px;</font>
    
84. <font size="4">  border-color: green;</font>
    
85. <font size="4">}</font>
    
86. <font size="4">
    
87. </font>
    
88. <font size="4">.exp__input:valid + label {</font>
    
89. <font size="4">  color: green;</font>
    
90. <font size="4">}</font>
    
91. <font size="4">
    
92. </font>
    
93. <font size="4">.exp__input:valid + label:before {</font>
    
94. <font size="4">  transform: rotateY(0deg);</font>
    
95. <font size="4">  color: green;</font>
    
96. <font size="4">  font-size: 34px;</font>
    
97. <font size="4">  content: attr(data-icon-ok);</font>
    
98. <font size="4">}</font>
    
99. <font size="4">
    
100. </font>
     
101. <font size="4">.exp-title {</font>
     
102. <font size="4">  text-align: center;</font>
     
103. <font size="4">  font-size: 22px;</font>
     
104. <font size="4">  margin-bottom: 30px;</font>
     
105. <font size="4">  font-weight: normal;</font>
     
106. <font size="4">}</font>
     
107. <font size="4">
     
108. </font>
     
109. <font size="4">.exp-title span {</font>
     
110. <font size="4">  display: inline-block;</font>
     
111. <font size="4">  padding: 5px;</font>
     
112. <font size="4">  font-size: 22px;</font>
     
113. <font size="4">  background: #feffd4;</font>
     
114. <font size="4">}</font>
     
115. 
     

复制代码