Question

我有一个在悬停时扩展的搜索框，它依赖于最初完全隐藏的输入字段;但我似乎无法找到造成这个宽度的原因。

这是我的代码;现场版本是：http://stylrs.com/ctf/

.search_header {
    float: right;
    clear: both;
    height: 30px;

}
.search_header input {
    -moz-transition: width 0.5s;
    -ms-transition: width 0.5s;
    -webkit-transition: width 0.5s;
    transition: width 0.5s;
    width: 0;  
    margin: 0 !important;
}

.search_header input:focus,
.search_header:hover input {
    width: 135px;
}

.fa-input {
    background-color: none !important;
    color: white;
    float: right;
    font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 15px;
    margin-top: 1px;
    width: 15px !important;
    border: none !important;
    padding: 0;
    margin: 0;
}

.search_header input[type="text"] {
    margin-right: 0;
    font-size: 12px;
}

.search_header input[type="submit"] {
    appearance: value;
    background: none !important;
    webkit-appearance: none !important;
}

<div class="search_header">
    <form role="search" method="get" id="searchform" class="searchform" action="test">  
        <div>
        <label class="screen-reader-text" for="s"><?php _x( 'Search for:', 'label',  'QEPRize'); ?></label>
        <input type="text" value="test" name="s" id="s" />
        <input type="submit" class="btn fa-input" value="&#xf002;"> 
    </div>
    </form>
</div>

Answer 1

padding和border导致input可见的原因（即使width为零）。

将这些属性设置为零，并使它们成为动画的一部分。

无法找到向表单元素添加宽度的内容

1 个答案: