2

我有这个搜索字段：

在此处输入图像描述

右边的“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;   
        }
    }

}
4

1 回答 1

0

因为您在 .capbClearTextIcon 的“之前”伪元素上设置了一个高值我猜该图标也是通过该伪元素定义的？如果这是真的，您是否尝试将图标放在真实跨度而不是伪元素中？像这样：

.capbClearTextIcon {
    background-image: url('@{capbImgPath}/icon_close_323232.svg');
    background-repeat: no-repeat;
    display: inline-block;
    content: "";
    height: 25px;
    width: 25px;
}
于 2013-06-29T11:59:32.220 回答