CODEWITHSUNDEEP
htmlcss
user5909516
user5909516

Reputation:

Expanding search bar exanding to the left and show search button

I am using following code and code work fine. but i wanna that when user click on search button then search button will also show like stackoverflow search bar has.

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%;
}

Upvotes: 2

Views: 1038

Answers (1)

Ani
Ani

Reputation: 2988

Follow these steps

  1. Create a button
  2. Place that button on the search bar
  3. set display property of that button to none
  4. now whenever you focus on the search bar, change display property of that button to block

try implementing this code on your own first ... 

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>

Upvotes: 1

Related Questions