У меня есть форма, которая появляется, когда я нажимаю на кнопку поиска следующим образом:
См. Выше, что мышь не находит ввод и не кликабельна. Если я пытаюсь нажать на него, он закрывает окно (так же, как если бы я нажал кнопку Esc).
Мы обнаружили, что проблема возникает на Surface Pro и на мобильном телефоне (наверное, из-за сенсорного экрана).
Если я возьму компьютер без сенсорного экрана, он будет работать нормально - см. Скриншот:
Вот моя HTML-форма:
<form method="get" action="//revendeur-sport.kettler-france.com/recherche" class="dropdown-menu" id="search_form" style="display: block;">
<input name="controller" value="search" type="hidden">
<span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span><input name="s" value="" placeholder="Chercher dans notre catalogue" class="ui-autocomplete-input" autocomplete="off" type="text">
<button type="submit">
<i class="icon icon-search2"></i>
</button>
</form>
А вот и мой CSS:
élément {
display: block;
}
#header .search-widget.open .dropdown-menu {
z-index: 99;
display: block;
visibility: visible;
opacity: 1;
filter: alpha(opacity=100);
}
#header .search-widget .dropdown-menu {
position: absolute;
top: 100%;
margin: 0;
display: none;
visibility: hidden;
opacity: 0;
filter: alpha(opacity=0);
}
.popup-over .dropdown-menu {
right: 0;
left: auto;
}
.search-widget .dropdown-menu {
background: none;
border: none;
min-width: inherit;
padding: 0;
display: block;
float: none;
}
.open > .dropdown-menu {
display: block;
}
.search-widget form {
-moz-box-shadow: 0px 4px 15px 0px rgba(102, 102, 102, 0.35);
-webkit-box-shadow: 0px 4px 15px 0px rgba(102, 102, 102, 0.35);
-o-box-shadow: 0px 4px 15px 0px rgba(102, 102, 102, 0.35);
-ms-box-shadow: 0px 4px 15px 0px rgba(102, 102, 102, 0.35);
box-shadow: 0px 4px 15px 0px rgba(102, 102, 102, 0.35);
}
.search-widget form {
position: relative;
}
.dropdown-menu, .popup-content {
animation: animationmenus ease 0.5s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode: forwards;
-webkit-animation: animationmenus ease 0.5s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode: forwards;
-moz-animation: animationmenus ease 0.5s;
animation-iteration-count: 1;
animation-fill-mode: none;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode: forwards;
-o-animation: animationmenus ease 0.5s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode: forwards;
-ms-animation: animationmenus ease 0.5s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode: forwards;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 10rem;
padding: 8px 0;
margin: 0.125rem 0 0;
font-size: 14px;
color: #666666;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
}
*, ::before, ::after {
box-sizing: inherit;
}
body {
font-family: "Poppins", sans-serif;
font-size: 14px;
line-height: 1.5;
color: #666666;
}
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
font-size: 16px;
}
0% {
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: translate(0px, 10px);
-ms-transform: translate(0px, 10px);
transform: translate(0px, 10px);
}
100% {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
0% {
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: translate(0px, 10px);
-ms-transform: translate(0px, 10px);
transform: translate(0px, 10px);
}
Вы можете найти соответствующий веб-сайт по адресу: https://revendeur -sport.kettler-france.com /
РЕДАКТИРОВАТЬ: Он отлично работает в Internet Explorer и Edge. Но не в Firefox (последнее обновление) и Chrome (последнее обновление)
Спасибо за вашу помощь.