I have the input search field. When I click on it I need it to become wider performing smooth transition from right to left, i.e. the input is located on the right side of the page and when I click on it it should stretch to the left in some number of pixels and become wider.
Here's my css:
#header #search input {
background: #FFF;
padding: 1px 1px 1px 5px;
width: 178px;
height: 21px;
border: 1px solid #CCCCCC;
border-radius: 6px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
#header #search input:focus {
background: #FFF;
padding: 1px 1px 1px 5px;
width: 300px;
height: 21px;
border: 1px solid #CCCCCC;
Could you help me with implementing that?
:focus
selector. So within it should be your width alteration. The rest, since it's already within your 'normal' selector. Only things that are changing should be placed in the focus selector. Also note your header and search are id's (#) and not class (.) So ensure your input is within an I'd of header which has a child with I'd search which itself has a child input