Question

我有一个这样的表单，当我单击搜索按钮时会显示如下形式：

请参见上方，鼠标找不到输入且不可单击。如果我尝试单击它，它将关闭窗口（就像我按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（最新更新）

感谢您的帮助。

将问题仅放在带有触摸屏的设备上的输入表单上

0 个答案: