Advertisement
Guest User

Untitled

a guest
Nov 23rd, 2014
135
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.24 KB | None | 0 0
  1. J'ai un formulaire qui ressemble à ça :
  2.  
  3. <form action="<?php bloginfo('siteurl'); ?>" id="searchform" method="get">
  4. <fieldset>
  5. <label for="s" class="screen-reader-text">Recherche</label>
  6. <input class="search" id="s" name="s" placeholder="Recherche" required />
  7. <div class="text-center"><button type="submit" class="searchsubmit" alt="Recherche"><i class="icon-search"></i></button></div>
  8. </fieldset>
  9. <div class="text-center"><button type="reset" id="close" alt="close"><i class="icon-clear"></i></button></div>
  10. </form>
  11.  
  12. Avec ce CSS :
  13.  
  14. input, button {
  15. text-decoration:none;
  16. background: transparent;
  17. border: none;
  18. -webkit-appearance: none;
  19. box-shadow: none;
  20. }
  21.  
  22. button:active, button:focus, button:hover {
  23. text-decoration:none;
  24. background: transparent;
  25. border: none;
  26. -webkit-appearance: none;
  27. box-shadow: none;
  28. }
  29.  
  30. #searchform {
  31. position: fixed;
  32. top: 3.2rem;
  33. left: 0;
  34. right: 0;
  35. bottom: 0;
  36. margin: 0;
  37. background: #FFF;
  38. opacity: 0;
  39. visibility: hidden;
  40. z-index: 1999;
  41. transform: scale(0);
  42. transition: all 400ms ease-in-out;
  43. }
  44. #searchform.active {
  45. opacity: 1;
  46. visibility: visible;
  47. transform: scale(1);
  48. }
  49. #searchform fieldset {
  50. position: absolute;
  51. top: 0;
  52. left: 0;
  53. right: 0;
  54. bottom: 0;
  55. width: 95%;
  56. height: 12rem;
  57. line-height: 8rem;
  58. margin: auto;
  59. border: none;
  60.  
  61. #searchform fieldset .search {
  62. width: 95%;
  63. padding: 0;
  64. border: 0;
  65. outline: 0;
  66. background: transparent;
  67. font-family: 'Noto Sans', sans-serif;
  68. font-size: 8rem;
  69. color: #000;
  70. border-bottom: 0.1rem solid #CCC;
  71. }
  72.  
  73. #searchform fieldset .searchsubmit {
  74. cursor: pointer;
  75. font-size: 8rem;
  76. color: #000;
  77. margin-top: 6rem;
  78. transition: all 0.6s ease-in-out;
  79. }
  80. #searchform fieldset .searchsubmit:hover {
  81. color: #00C78C;
  82. }
  83.  
  84.  
  85. #searchform #close {
  86. cursor: pointer;
  87. font-size: 5rem;
  88. color: #000;
  89. margin-top: 4rem;
  90. transition: all 0.6s ease-in-out;
  91. }
  92. #searchform #close:hover {
  93. color: #00C78C;
  94. }
  95.  
  96. et un JS qui rajoute la classe active pour ouvrir/fermer un overlay.
  97.  
  98. Quand je "clique" sur les boutons searchsubmit ou close sur un mobile ( android ) ça m'ouvre le clavier pendant une fraction de seconde.
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement