bootstrap  input设置 type="search"  无效   解决办法

​由于在项目中需要实现input右侧能有一个小叉，以实现清空内容。如下

在不使用bootstrap时只需要在给Input添加 type="search"即可，但引入bootstrap后，此不能实现。多方查找解决方案无果，查询中仅找到如何清除X的相关资料，如下：

input[type=search]::-webkit-search-cancel-button{
    -webkit-appearance: none;/*此处只是去掉默认的小×*/
}

从上可以看出，既然可以用none清除，那么应该也可以设置相应值进行重置。通过测试发现，将其如下改写即可：

input[type=search]::-webkit-search-cancel-button {
            -webkit-appearance:searchfield-cancel-button;
        }

实现后如下

另自定义input 叉的例子如下（来源网络，测试有效）

input[type=search]::-webkit-search-cancel-button{
    -webkit-appearance: none;

    position: relative;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: #EBEBEB;
}

input[type=search]::-webkit-search-cancel-button:after{
    position: absolute;
    content: 'x';
    left: 25%;
    top: -12%;
    font-size: 20px;
    color: #fff;
}

上述自定义效果如下：

另外在实际项目中，若将input  的type设置为 type="number"，那么其maxlength将无效，max min无效（max min后续会继续关注）。

首发于CSDN

赞 (0)

相关推荐