CODEWITHSUNDEEP
htmlcsstransitionplaceholder
Tauras
Tauras

Reputation: 3904

CSS3 expandable search box does not work properly with placeholder

I want to hide placeholder if search icon is not clicked. Is this even possible? If this is possible, than how i can fix this problem?

HTML

<form id="demo-2">
  <input type="search" placeholder="some text" />
</form>

CSS

input { outline: none; }
input[type=search] {
    font-family: inherit; 
    font-size: 100%; 
    -webkit-appearance: textfield; 
    -webkit-box-sizing: content-box;
}

input::-webkit-search-decoration, input::-webkit-search-cancel-button
   { display: none; }

input[type=search] { 
    background:url(http://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px; 
    border:none; 
    height:35px; 
    -moz-transition: all .5s; 
    transition: all .5s; }


#demo-2 input[type=search] {
    width: 100px;
    padding-left: 10px;
    color: transparent;
    cursor: pointer;
}

#demo-2 input[type=search]:focus {
    background:url(http://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
    width: 626px;
    padding-left: 32px;
    color: #000;
    background-color: #fff;
    cursor: auto;
}


#demo-2 input:-moz-placeholder { color:red; }
#demo-2 input::-webkit-input-placeholder { color:red; }

Demo at JSFiddle

Sorry for my bad english. Thanks for any of answers.

Upvotes: 0

Views: 452

Answers (2)

Justin
Justin

Reputation: 1329

Try this adding onfocus and onblur attributes to the input:

<input type="search" onfocus="placeholder='some text'" onblur="placeholder=''" />

Fiddle: http://jsfiddle.net/dW92N/3/

Upvotes: 1

Tauras
Tauras

Reputation: 3904

Ah, i found answer myself..

#demo-2 input:-moz-placeholder { color:transparent; }
#demo-2 input::-webkit-input-placeholder { color:transparent; }
#demo-2 input:focus::-webkit-input-placeholder { color:red }
#demo-2 input:focus:-moz-placeholder { color:red; }

Upvotes: 0

Related Questions