Question

我在我的网站搜索工具栏上工作。一切都运行正常，除了具有奇怪行为的工具栏的隐藏效果。转换工作正常，显示写入栏，当我再次在搜索图标中计时它假设隐藏整个条，但只隐藏了大约一半。如果我在搜索工具栏外单击，则栏会正确隐藏。这是我的代码：Jsfiddle。以及相关代码：

#input {
position: absolute;
top: 0;
right: 30px;
width: 200px;
height: 30px;
z-index: 5;
overflow: hidden;}

#input input {
display: block;
position: absolute;
top: 0;
right: -200px;
width: 200px;
height: 100%;
margin: 0;
padding: 0 10px;
border: none;
background-color: #ededed;
color: #000;
font-size: 12px;
-webkit-backface-visibility: none;
-moz-backface-visibility: none;
-ms-backface-visibility: none;
backface-visibility: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-transition: right 0;
-moz-transition: right 0;
-ms-transition: right 0;
-o-transition: right 0;
transition: right 0;}

#input input:focus {
outline: none;}

#input.focus {
z-index: 20;}

#input.focus input {
right: 0;
-webkit-transition: right 0.3s;
-moz-transition: right 0.3s;
-ms-transition: right 0.3s;
-o-transition: right 0.3s;
transition: right 0.3s;}

提前致谢！

Answer 1

由于输入元素的填充

，它似乎是输入框没有完全隐藏的原因

.input input {  padding: 0 10px;

实际宽度由浏览器计算，输入框为

width:200px + padding-left:10px + padding-right:10px =实际宽度为220px;

解决方法是添加

.input input { box-sizing:border-box;

输入元素类的属性

示例代码可以在这里看到

.input {
    position: absolute;
    top: 0;
    right: 30px;
    width: 200px;
    height: 30px;
    line-height: 30px;
    z-index: 5;
    overflow: hidden;
    border:1px solid #ccc;
  background-color:#fff;
}

.input input {
    box-sizing:border-box;
    display: block;
    position: absolute;
    top: 0;
    right: -200px;
    width: 200px;
    height: 100%;
    margin: 0;
    padding: 0 10px;
    border: none;
    background-color: #fff;
    color: #000;
    font-size: 12px;

    -webkit-backface-visibility: none;
    -moz-backface-visibility: none;
     -ms-backface-visibility: none;
         backface-visibility: none;

    -webkit-border-radius: 0;
    -moz-border-radius: 0;
     border-radius: 0;

    -webkit-transition: right -200px;
    -moz-transition: right -200px;
    -ms-transition: right -200px;
    -o-transition: right -200px;
    transition: right -200px;
}

.input input:focus  { outline: none;    }
.input.focus        { z-index: 20;      }
.input:hover input{ 
    right:0px; 
    -webkit-transition: right 0px 0.3s;
    -moz-transition: right 0.3s;
    -ms-transition: right 0.3s;
    -o-transition: right 0.3s;
    transition: right 0px 0.3s;
}

.input.focus input  {
    right:0px; 
-webkit-transition: right 0px 0.3s;
-moz-transition: right 0.3s;
-ms-transition: right 0.3s;
-o-transition: right 0.3s;
transition: right 0px 0.3s; 
}
body { font:13px 'arial'; }

https://jsfiddle.net/ShirishDhotre/9gqa2bum/

我为演示添加了悬停效果，你可以删除类

.input:hover input{

搜索工具栏隐藏效果

1 个答案: