向左扩展搜索栏并显示搜索按钮
问题描述:
我正在使用以下代码和代码正常工作。但我想当用户点击搜索按钮,然后搜索按钮也会显示像*搜索栏一样。向左扩展搜索栏并显示搜索按钮
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%;
}
答
按照以下步骤
- 创建
button
- 将是
button
搜索栏上 - 设置的是
button
到none
- 现在,只要你专注的搜索栏上,改变
display
财产display
属性,button
到block
试图实现在自己的第一个验证码...
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: 90%;
}
input[type=text]:focus + .but{
display: block;
}
.but{
cursor:pointer;
width: 100px;
height: 50px;
position: absolute;
right:5px;
top:5px;
display:none;
}
<form>
<input type="text" name="search" placeholder="Search.."><input class="but" type="button" value = "search">
</form>
+0
@Unidan告诉我我能做些什么来改善我的答案。如果它满足你的查询,那么接受它将是最好的事情:) – Ani
那么是什么问题? – Dai
尝试一下自己。 – TricksfortheWeb