526互联

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

发布时间 2023-07-04 18:34:50作者: 弩哥++
  • 想要实现的效果如下
    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;
}