首页>>表单>>自适应的占位符效果(2021-05-11)

自适应的占位符效果

自适应的占位符效果
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div style="width:400px;height:100px;margin:300px auto">  
  2.     <form>  
  3.         <input required='' type='text'>  
  4.         <label alt='请输入名称' placeholder='名称'></label>  
  5.     </form>  
  6. </div>  

 

CSS Code
  1. body {  
  2.     background-color: #FAFAFA;  
  3. }  
  4. input[type="text"] {  
  5.   -webkit-box-sizing: border-box;  
  6.   -moz-box-sizing: border-box;  
  7.   box-sizing: border-box;  
  8.   width: 100%;  
  9.   height: -webkit-calc(3em + 2px);  
  10.   height: calc(3em + 2px);  
  11.   margin: 0 0 1em;  
  12.   padding: 1em;  
  13.   border: 1px solid #cccccc;  
  14.   border-radius: 1.5em;  
  15.   background: #fff;  
  16.   resize: none;  
  17.   outline: none;  
  18. }  
  19. input[type="text"][required]:focus {  
  20.   border-color: #00bafa;  
  21. }  
  22. input[type="text"][required]:focus + label[placeholder]:before {  
  23.   color: #00bafa;  
  24. }  
  25. input[type="text"][required]:focus + label[placeholder]:before,  
  26. input[type="text"][required]:valid + label[placeholder]:before {  
  27.   -webkit-transition-duration: .2s;  
  28.   transition-duration: .2s;  
  29.   -webkit-transform: translate(0, -1.5em) scale(0.9, 0.9);  
  30.   -ms-transform: translate(0, -1.5em) scale(0.9, 0.9);  
  31.   transform: translate(0, -1.5em) scale(0.9, 0.9);  
  32. }  
  33. input[type="text"][required]:invalid + label[placeholder][alt]:before {  
  34.   content: attr(alt);  
  35. }  
  36. input[type="text"][required] + label[placeholder] {  
  37.   display: block;  
  38.   pointer-events: none;  
  39.   line-height: 2.3em;  
  40.   margin-top: -webkit-calc(-3em - 2px);  
  41.   margin-top: calc(-3em - 2px);  
  42.   margin-bottom: -webkit-calc((3em - 1em) + 2px);  
  43.   margin-bottom: calc((3em - 1em) + 2px);  
  44. }  
  45. input[type="text"][required] + label[placeholder]:before {  
  46.   content: attr(placeholder);  
  47.   display: inline-block;  
  48.   margin: 0 -webkit-calc(1em + 2px);  
  49.   margin: 0 calc(1em + 2px);  
  50.   padding: 0 2px;  
  51.   color: #898989;  
  52.   whitewhite-space: nowrap;  
  53.   -webkit-transition: 0.3s ease-in-out;  
  54.   transition: 0.3s ease-in-out;  
  55.   background-image: -webkit-gradient(linear, left top, left bottombottom, from(#ffffff), to(#ffffff));  
  56.   background-image: -webkit-linear-gradient(top, #ffffff, #ffffff);  
  57.   background-image: linear-gradient(to bottombottom, #ffffff, #ffffff);  
  58.   -webkit-background-size: 100% 5px;  
  59.   background-size: 100% 5px;  
  60.   background-repeat: no-repeat;  
  61.   background-position: center;  
  62. }  

 


原文地址:http://www.freejs.net/article_biaodan_904.html