Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- J'ai un formulaire qui ressemble à ça :
- <form action="<?php bloginfo('siteurl'); ?>" id="searchform" method="get">
- <fieldset>
- <label for="s" class="screen-reader-text">Recherche</label>
- <input class="search" id="s" name="s" placeholder="Recherche" required />
- <div class="text-center"><button type="submit" class="searchsubmit" alt="Recherche"><i class="icon-search"></i></button></div>
- </fieldset>
- <div class="text-center"><button type="reset" id="close" alt="close"><i class="icon-clear"></i></button></div>
- </form>
- Avec ce CSS :
- input, button {
- text-decoration:none;
- background: transparent;
- border: none;
- -webkit-appearance: none;
- box-shadow: none;
- }
- button:active, button:focus, button:hover {
- text-decoration:none;
- background: transparent;
- border: none;
- -webkit-appearance: none;
- box-shadow: none;
- }
- #searchform {
- position: fixed;
- top: 3.2rem;
- left: 0;
- right: 0;
- bottom: 0;
- margin: 0;
- background: #FFF;
- opacity: 0;
- visibility: hidden;
- z-index: 1999;
- transform: scale(0);
- transition: all 400ms ease-in-out;
- }
- #searchform.active {
- opacity: 1;
- visibility: visible;
- transform: scale(1);
- }
- #searchform fieldset {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- width: 95%;
- height: 12rem;
- line-height: 8rem;
- margin: auto;
- border: none;
- #searchform fieldset .search {
- width: 95%;
- padding: 0;
- border: 0;
- outline: 0;
- background: transparent;
- font-family: 'Noto Sans', sans-serif;
- font-size: 8rem;
- color: #000;
- border-bottom: 0.1rem solid #CCC;
- }
- #searchform fieldset .searchsubmit {
- cursor: pointer;
- font-size: 8rem;
- color: #000;
- margin-top: 6rem;
- transition: all 0.6s ease-in-out;
- }
- #searchform fieldset .searchsubmit:hover {
- color: #00C78C;
- }
- #searchform #close {
- cursor: pointer;
- font-size: 5rem;
- color: #000;
- margin-top: 4rem;
- transition: all 0.6s ease-in-out;
- }
- #searchform #close:hover {
- color: #00C78C;
- }
- et un JS qui rajoute la classe active pour ouvrir/fermer un overlay.
- 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