Reputation: 657
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
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
Reputation: 9230
Use :focus
pseudo-class und set outline
to none.
http://www.w3schools.com/css/tryit.asp?filename=trycss_link_focus
Upvotes: 0
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
Reputation: 33880
Add outline : none
on :focus
:
#search input[type="text"]:focus {
width: 200px;
outline : none;
}
Upvotes: 9
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