Guest User

Untitled

a guest
Aug 31st, 2016
55
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.36 KB | None | 0 0
  1. <form action="#" method="post">
  2.  
  3. <div class="input_block">
  4. <input type="text" name="name" id="name_input">
  5. <label for="name_input">
  6. <span>Full Name:</span>
  7. </label>
  8. </div>
  9.  
  10. <div class="input_block">
  11. <input type="text" name="phone" id="phone_input">
  12. <label for="phone_input">
  13. <span>Phone Number:</span>
  14. </label>
  15. </div>
  16.  
  17. </form>
  18.  
  19. .input_block {
  20. margin: 0 0 25px 0;
  21. width: 344px;
  22. height: 66px;
  23. position: relative;
  24. }
  25.  
  26. .input_block input {
  27. display: block;
  28. padding: 0;
  29. width: 344px;
  30. height: 64px;
  31. border: none;
  32. border-bottom: 2px solid #000;
  33. background: none;
  34. font-family: "ProximaNovaBold";
  35. font-size: 24px;
  36. color: #000;
  37. outline: none;
  38. }
  39.  
  40. .input_block label {
  41. display: block;
  42. width: 344px;
  43. height: 64px;
  44. position: absolute;
  45. top: 0;
  46. left: 0;
  47. }
  48.  
  49. .input_block label span {
  50. display: block;
  51. height: 24px;
  52. -webkit-transition: all 0.3s ease;
  53. -moz-transition: all 0.3s ease;
  54. -o-transition: all 0.3s ease;
  55. -ms-transition: all 0.3s ease;
  56. transition: all 0.3s ease;
  57. font-family: "ProximaNovaBold";
  58. font-size: 24px;
  59. line-height: 24px;
  60. color: #000;
  61. position: absolute;
  62. top: 21px;
  63. left: 0;
  64. }
  65.  
  66. .input_block input:focus + label span {
  67. font-size: 14px;
  68. top: -10px;
  69. }
Add Comment
Please, Sign In to add comment