请问html怎么做出这种效果？

这是Twitter搜索框未选中的时候

选中的时候

这俩张是我自己做的

图片说明

前两张是Twitter上的
后俩张是我自己做的
为什么我的选中后还是长方形的框呢？

 <style>
    input{
        border-radius: 5px;
        outline: none;
        border:1px solid gainsboro;
    }
    input:focus{
        border:1px solid gold;
    }
</style>
<body>
<input type="text">
</body>
input{ border-radius: 5px; outline: none; border:1px solid gainsboro; } input:focus{ border:1px solid gold; }



<!DOCTYPE html>



echart1


<br> input{<br> /* 注意高度和圆角的大小一样即可 */<br> height:20px;<br> border-radius: 20px;</p> <pre><code> outline: none; border:2px solid gainsboro; } input:focus{ border:2px solid red; } </code></pre> <p>


<br> input{<br> /* 注意高度和圆角的大小一样即可 */<br> height:20px;<br> border-radius: 20px;</p> <pre><code> outline: none; border:2px solid gainsboro; } input:focus{ border:2px solid red; } </code></pre> <p>

问题在于浏览器对input:focus设置有默认样式。
一般情况下设置有outline，这时候把outline去掉就好。

input:focus {
    outline: none;
}

或者你自己设置其他样式的outline。

楼上正解，是google自带的点击出现蓝色边框