input伪类focus边框颜色没有生效问题记录

  • 想要实现的效果如下
    image
#html
        <div class="txt">
            <input type="text" class="search" placeholder="   空调">
            <ul class="result-list">
                <li><a href="#">全部商品</a></li>
                <li><a href="#">redmi k60e</a></li>
                <li><a href="#">空调</a></li>
                <li><a href="#">冰箱</a></li>
                <li><a href="#">手机</a></li>
                <li><a href="#">洗衣机</a></li>
                <li><a href="#">耳机</a></li>
                <li><a href="#">显示器</a></li>
            </ul>
        </div>
#css
#重点是先设置outline 为none,否则focus的时候,边框颜色没有生效
.txt input {
    width: 293px;
    height: 50px;
    border: 1px solid #e0e0e0;
    outline: none;
}

.txt input:focus {
    border: 1px solid #ff6700;
}

.txt ul {
    width: 293px;
    height: 242px;
    border: 1px solid #ff6700;
    border-top: 0;
}

posted @ 2023-07-04 18:21  弩哥++  阅读(146)  评论(0编辑  收藏  举报