CODEWITHSUNDEEP
htmlcss
nellygrl
nellygrl

Reputation: 657

Border around search box when you click into it

I found this great CSS for a search box but when I click into the search box, an orange border appears around it (which isn't appealing, lol). If anyone could advice me on how to get rid of the border, it would be greatly appreciated. The CSS is as follows:

#search input[type="text"] {
    background: url(search-white.png) no-repeat 10px 6px #fcfcfc;
    border: 1px solid #d1d1d1;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bebebe;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#search input[type="text"]:focus {
    width: 200px;
    }

And I've created this JSFiddle for you if it helps: http://jsfiddle.net/nkZ4p/

Upvotes: 4

Views: 22612

Answers (5)

Selvamani
Selvamani

Reputation: 7684

It is the property of browser. We need to over right this. In chrome its shows orange color and in firefox it shows dotted-line.

you can replace this code to overcome that functions.

#search input[type="text"]:focus {
   width: 200px;
   outline: none;
}

Upvotes: 1

Michael Schmidt
Michael Schmidt

Reputation: 9230

Use :focus pseudo-class und set outline to none.

http://www.w3schools.com/css/tryit.asp?filename=trycss_link_focus

Upvotes: 0

Ernie
Ernie

Reputation: 1000

I have a blue border, i guess it depends on what browser you use. You can remove it with adding the following css: outline:none;

Upvotes: 0

Karl-André Gagnon
Karl-André Gagnon

Reputation: 33880

Add outline : none on :focus:

#search input[type="text"]:focus {
    width: 200px;
    outline : none;
}

Upvotes: 9

n00dle
n00dle

Reputation: 6053

See this question - it's not actually border it's outline. Remove it using:

#search input[type="text"]:focus {
    outline: none;
}

Upvotes: 0

Related Questions