CODEWITHSUNDEEP
css
user3453264
user3453264

Reputation: 343

Styling search <input> with css

I am trying to style a search input box, such that, when the user, click into the box, it changes to a different color, and to get rid of the blue outline that indicates that the user has selected the text box.

Any suggestions or ideas? Thanks.

jsFiddle: http://jsfiddle.net/7t5AY/

HTML:

<input type="text" id="text-search" placeholder="Search" >

Upvotes: 1

Views: 148

Answers (1)

SW4
SW4

Reputation: 71150

You can use the :focus selector, e.g:

Demo Fiddle

input[type=text]:focus{
    outline:none; /* removes the blue outline on focus */
    background:lightgrey; /* however you wish to style */
    border:1px solid black; /* however you wish to style */
}

Or more stylishly..

Note that in HTML5, input type="search" is a valid designation

Upvotes: 3

Related Questions