Question

我有这个搜索字段：

enter image description here

右边的'x'正在清除文字。它适用于除IE9 / 10以外的所有浏览器。

从我所看到的，一旦图标位于输入上方，它就不再可点击，就像输入覆盖它一样（虽然它是可见的）。如果我将图标向右移动一点，使其不在输入上，则按预期运行。

我尝试更改z-index但没有成功。

HTML：

<div class="capbSearchPanel" data-bind="with: searchVM">
    <div class="capbWrapper">
        <a href="#" class="capbBtn capbBtnCancel cafeLeft">Cancel</a>
        <div class="capbSearchInputWrapper cafeLeft">
            <span class="capbIcon capbClearTextIcon"></span>
            <span class="capbIcon capbSearchIcon"></span>
            <input  type="search" class="capbSearchInput"  autofocus="true" placeholder="Search For Anything..."/>
        </div>
        <a href="#"><span class="capbIcon cafeLeft"></span></a>
    </div>
</div>

少

/* SEARCH FIELD*/
.capbSearchInputWrapper{
    position: relative;
    display: inline-block;

    input{
        width: 100%;
        height: 31px;
        background-color: #fff;
        padding: 0px 26px 0 27px;
        border: solid 1px #c0c0c0;

        //iPads (landscape) -----------
        @media only screen
        and (min-device-width : 768px)
        and (max-device-width : 1024px)
        {
            padding-top: 5px;
        }
    }

    .capbIcon{
        line-height: 20px;
        position: absolute;
        top: 50%;
        width: 24px;
        margin-top: -12px;

        //iPads (landscape) -----------
        @media only screen
        and (min-device-width : 768px)
        and (max-device-width : 1024px)
        {
            margin-top: -13px;
        }

    }
    .capbSearchIcon{
        // content: url('@{capbImgPath}/icon_search_323232.svg');
        left: 5px;
        &:before{
            height: 25px;
            content: url('@{capbImgPath}/icon_search_323232.svg');  
        }       
    }

    .capbClearTextIcon{
        right: 5px;
        z-index: 10;
        &:before{
            height: 25px;   
        }
    }

}

Answer 1

因为你在.capbClearTextIcon的“之前”伪元素上设置了一个hight值我猜这个图标也是通过那个伪元素定义的？如果这是真的，你是否尝试将图标放在实际范围内而不是伪元素？像这样：

.capbClearTextIcon {
    background-image: url('@{capbImgPath}/icon_close_323232.svg');
    background-repeat: no-repeat;
    display: inline-block;
    content: "";
    height: 25px;
    width: 25px;
}

IE9-IE10 - 无法单击绝对定位元素

1 个答案: