首页>>表单>>占位符替换 占位符移动到上方的表单(2020-01-30)

占位符替换 占位符移动到上方的表单

占位符替换 占位符移动到上方的表单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="page-container">  
  2. <form class="bl_form">  
  3. <input type="text" class="label_better" data-new-placeholder="Username" placeholder="Username">  
  4. <input type="email" class="label_better" data-new-placeholder="Email Address" placeholder="Email Address">  
  5. <input type="password" class="label_better" data-new-placeholder="Password" placeholder="Password">  
  6. <input type="password" class="label_better" data-new-placeholder="Confirm Password" placeholder="Confirm Password">  
  7. </form>  
  8. </div>  

 

CSS Code
  1. <style>  
  2.   
  3.      
  4.     body {  
  5.   
  6.       background: #272D30;  
  7.   
  8.       padding: 0;  
  9.   
  10.       text-align: center;  
  11.   
  12.       font-family: 'open sans';  
  13.   
  14.       position: relative;  
  15.   
  16.       margin: 0;  
  17.   
  18.       height: 100%;  
  19.   
  20.     }  
  21.   
  22.       
  23.   
  24.     .wrapper {  
  25.   
  26.         height: auto !important;  
  27.   
  28.         height: 100%;  
  29.   
  30.         margin: 0 auto;   
  31.   
  32.         overflow: hidden;  
  33.   
  34.     }  
  35.   
  36.   
  37.   
  38.     .pointer {  
  39.   
  40.       color: #9b59b6;  
  41.   
  42.       font-family: 'Pacifico', cursive;  
  43.   
  44.       font-size: 30px;  
  45.   
  46.       margin-top: 15px;  
  47.   
  48.     }  
  49.   
  50.     pre {  
  51.   
  52.       margin: 80px auto;  
  53.   
  54.     }  
  55.   
  56.     pre code {  
  57.   
  58.       padding: 35px;  
  59.   
  60.       border-radius: 5px;  
  61.   
  62.       font-size: 15px;  
  63.   
  64.       background: rgba(0,0,0,0.1);  
  65.   
  66.       border: rgba(0,0,0,0.05) 5px solid;  
  67.   
  68.       max-width: 500px;  
  69.   
  70.     }  
  71.   
  72.   
  73.   
  74.   
  75.   
  76.     .main {  
  77.   
  78.       float: left;  
  79.   
  80.       width: 100%;  
  81.   
  82.       margin: 0 auto;  
  83.   
  84.     }  
  85.   
  86.       
  87.   
  88.       
  89.   
  90.     .main h1 {  
  91.   
  92.       padding:20px 50px;  
  93.   
  94.       float: left;  
  95.   
  96.       width: 100%;  
  97.   
  98.       font-size: 60px;  
  99.   
  100.       box-sizing: border-box;  
  101.   
  102.       -webkit-box-sizing: border-box;  
  103.   
  104.       -moz-box-sizing: border-box;  
  105.   
  106.       font-weight: 100;  
  107.   
  108.       margin: 0;  
  109.   
  110.       padding-top: 25px;  
  111.   
  112.       font-family: 'Pacifico';  
  113.   
  114.       letter-spacing: 2px;  
  115.   
  116.     }  
  117.   
  118.      
  119.   
  120.     .main h1.demo1 {  
  121.   
  122.       background: #1ABC9C;  
  123.   
  124.     }  
  125.   
  126.       
  127.   
  128.     .reload.bell {  
  129.   
  130.       font-size: 12px;  
  131.   
  132.       padding: 20px;  
  133.   
  134.       width: 45px;  
  135.   
  136.       text-align: center;  
  137.   
  138.       height: 47px;  
  139.   
  140.       border-radius: 50px;  
  141.   
  142.       -webkit-border-radius: 50px;  
  143.   
  144.       -moz-border-radius: 50px;  
  145.   
  146.     }  
  147.   
  148.       
  149.   
  150.     .reload.bell #notification {  
  151.   
  152.       font-size: 25px;  
  153.   
  154.       line-height: 140%;  
  155.   
  156.     }  
  157.   
  158.       
  159.   
  160.     .reload, .btn{  
  161.   
  162.       display: inline-block;  
  163.   
  164.       border: 4px solid #A2261E;  
  165.   
  166.       border-radius: 5px;  
  167.   
  168.       -moz-border-radius: 5px;  
  169.   
  170.       -webkit-border-radius: 5px;  
  171.   
  172.       background: #CC3126;  
  173.   
  174.       display: inline-block;  
  175.   
  176.       line-height: 100%;  
  177.   
  178.       padding: 0.7em;  
  179.   
  180.       text-decoration: none;  
  181.   
  182.       color: #fff;  
  183.   
  184.       width: 100px;  
  185.   
  186.       line-height: 140%;  
  187.   
  188.       font-size: 17px;  
  189.   
  190.       font-family: open sans;  
  191.   
  192.       font-weight: bold;  
  193.   
  194.     }  
  195.   
  196.     .reload:hover{  
  197.   
  198.       background: #A2261E;  
  199.   
  200.     }  
  201.   
  202.     .btn {  
  203.   
  204.       width: 200px;  
  205.   
  206.       color: #fff;  
  207.   
  208.       border: none;  
  209.   
  210.       margin-left: 10px;  
  211.   
  212.       background: rgba(255, 255, 255, 0.11);  
  213.   
  214.     }  
  215.   
  216.     .clear {  
  217.   
  218.       width: auto;  
  219.   
  220.     }  
  221.   
  222.     .btn:hover, .btn:hover {  
  223.   
  224.       background: rgba(255,255,255,0.3);  
  225.   
  226.     }  
  227.   
  228.     .btns {  
  229.   
  230.       width: 410px;  
  231.   
  232.       margin: 50px auto;  
  233.   
  234.     }  
  235.   
  236.     .credit {  
  237.   
  238.       font-style: italic;  
  239.   
  240.       text-align: center;  
  241.   
  242.       color: #fff;  
  243.   
  244.       padding: 10px;  
  245.   
  246.       margin: 0 0 40px 0;  
  247.   
  248.       float: left;  
  249.   
  250.       width: 100%;  
  251.   
  252.     }  
  253.   
  254.     .credit a {  
  255.   
  256.       color: #ccc;  
  257.   
  258.       text-decoration: none;  
  259.   
  260.       font-weight: bold;  
  261.   
  262.     }  
  263.   
  264.       
  265.   
  266.     .back {  
  267.   
  268.       position: absolute;  
  269.   
  270.       top: 0;  
  271.   
  272.       left: 0;  
  273.   
  274.       text-align: center;  
  275.   
  276.       display: block;  
  277.   
  278.       padding: 7px;  
  279.   
  280.       width: 100%;  
  281.   
  282.       box-sizing: border-box;  
  283.   
  284.       -moz-box-sizing: border-box;  
  285.   
  286.       -webkit-box-sizing: border-box;  
  287.   
  288.       background: rgba(0, 0, 0, 0.65);  
  289.   
  290.       font-weight: bold;  
  291.   
  292.       font-size: 13px;  
  293.   
  294.       color: #fff;  
  295.   
  296.       -webkit-transition: all 200ms ease-out;  
  297.   
  298.       -moz-transition: all 200ms ease-out;  
  299.   
  300.       -o-transition: all 200ms ease-out;  
  301.   
  302.       transition: all 200ms ease-out;  
  303.   
  304.     }  
  305.   
  306.     .back:hover {  
  307.   
  308.       background: rgba(0, 0, 0, 0.85);  
  309.   
  310.     }  
  311.   
  312.       
  313.   
  314.     .bl_form {  
  315.   
  316.       margin: 150px 0;  
  317.   
  318.     }  
  319.   
  320.       
  321.   
  322.     .bl_form input {  
  323.   
  324.       padding-top: 15px;  
  325.   
  326.       background:#CFF;  
  327.   
  328.       box-shadow: 0 2px 8px rgba(0,0,0,0.2);  
  329.   
  330.       border: none;  
  331.   
  332.       color:red;  
  333.   
  334.       padding: 10px 15px;  
  335.   
  336.       border-radius: 25px;  
  337.   
  338.       font-size: 16px;  
  339.   
  340.       outline: none;  
  341.   
  342.     }  
  343.   
  344.   
  345.   
  346.   
  347.   
  348.     .lb_wrap .lb_label.top, .lb_wrap .lb_label.bottombottom {  
  349.   
  350.       left: 15px !important;  
  351.   
  352.     }  
  353.   
  354.   
  355.   
  356.     .lb_wrap .lb_label.left {  
  357.   
  358.       left: 0;  
  359.   
  360.     }  
  361.   
  362.   
  363.   
  364.     .lb_label {  
  365.   
  366.       font-weight: bold;  
  367.   
  368.       color: #999;  
  369.   
  370.     }  
  371.   
  372.   
  373.   
  374.     .lb_label.active {  
  375.   
  376.       color: #000;  
  377.   
  378.     }  
  379.   
  380.       
  381.   
  382.     </style>  

 


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