将搜索栏扩展到左侧并显示搜索按钮

Question

我正在使用以下代码和代码工作正常。但我希望当用户点击搜索按钮时，搜索按钮也会显示像stackoverflow搜索栏一样。

HTML： -

              <form>
                <input type="text" name="search" placeholder="Search..">
            </form>

CSS

input[type=text] {
display:block;
margin: 0 0 0 auto;
width: 250px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('/searchicon.png');
background-position: 10px 10px; 
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;

}

input[type=text]:focus {
width: 100%;
}

Answer 1

请按照以下步骤操作

1. 创建button
2. 将button放在搜索栏
上
3. 将display的{​​{1}}属性设置为button
4. 现在，只要您专注于搜索栏，就将none的{​​{1}}属性更改为display

首先尝试自己实现此代码......

＆＃13;
＆＃13;
button
＆＃13;
block
＆＃13;
＆＃13;
＆＃13;